Question

我正在使用HTML和jQuery构建一个订单表单并且它已经完成，但我想知道是否有更好的方法来构建它或者我完成它的方式有什么问题。如果您需要知道这将被发布到“经典asp”页面。这是我的页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>SKU</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        function RemoveRow(htmlelement){

            $(htmlelement).parent().parent().remove();

        }
        function AddRow(){

            //Create a new row
            var NewRow = $("#clonerow").clone(true).attr("id","newrow");        

            //Modify the row text fields with new names
            $.each($(NewRow).find("input[name^='Order']"), function (k,v) {
                $(this).attr("name",$(this).attr("name").replace("Stub",$("#CurrentNum").val()));
                $(this).attr("id",$(this).attr("id").replace("Stub",$("#CurrentNum").val()));
            })

            $(NewRow).removeAttr("id");

            //Update the row number
            $("#CurrentNum").val(parseInt($("#CurrentNum").val()) + 1);

            //append the new row
            $(NewRow).insertBefore("#buttonrow");

        }

    </script>
    <style type="text/css">
        #clonerow {
            display:none;
        }

        #order thead td {
            background:silver;
            text-align:center;
        }

        #order input[type="text"] {
            width:95%;
        }

        #order img {
            border-style: none;
        }

        #order a {
            text-decoration: none;
        }

    </style>
</head>

<body style="background-color: gray">
    <input name="SONum" type="hidden" value="" />
    <input name="CurrentNum" id="CurrentNum" type="hidden" value="1" />
    <div id="orderdiv" style="width:930px;">
        <table id="order" cellpadding="0" style="width:930px;">
            <thead>
                <td>SKU</td>
                <td>Style#</td>
                <td>Description</td>
                <td>Pattern</td>
                <td>Size</td>
                <td>Color</td>
                <td>Qty</td>
                <td>Delete</td>
            </thead>
            <tr id="clonerow">
                <td><input id ="OrderSKUStub" name="OrderSKUStub" type="text" /></td>
                <td><input id="OrderStyleNumStub" name="OrderStyleNumStub" type="text" /></td>
                <td><input id="OrderDescriptionStub" name="OrderDescriptionStub" type="text" /></td>
                <td><input id="OrderPatternStub" name="OrderPatternStub" type="text" /></td>
                <td><input id="OrderSizeStub" name="OrderSizeStub" type="text" /></td>
                <td><input id="OrderColorStub" name="OrderColorStub" type="text" /></td>
                <td><input id="OrderQtyStub" name="OrderQtyStub" type="text" /></td>
                <td><a href="#" onclick="RemoveRow(this);" name="anchor"><img alt="delete" src="001_05.gif" name="delete"/></a></td>
            </tr>

            <tr>
                <td><input id ="OrderSKU" name="OrderSKU" type="text" /></td>
                <td><input id="OrderStyleNum" name="OrderStyleNum" type="text" /></td>
                <td><input id="OrderDescription" name="OrderDescription" type="text" /></td>
                <td><input id="OrderPattern" name="OrderPattern" type="text" /></td>
                <td><input id="OrderSize" name="OrderSize" type="text" /></td>
                <td><input id="OrderColor" name="OrderColor" type="text" /></td>
                <td><input id="OrderQty" name="OrderQty" type="text" /></td>
                <td><a href="#" onclick="RemoveRow(this);" name="anchor"><img alt="delete" src="001_05.gif" name="delete"/></a></td>
            </tr>
            <tr id="buttonrow">
                <td colspan="8"><input name="AddRowButton" type="button" value="Add Row" onclick="AddRow();" /></td>
            </tr>
            <tr>
                <td colspan="8">&nbsp;</td>
            </tr>
        </table>
        </div>
</body>

</html>

感谢。

瓦德

编辑：我忘了添加我感兴趣的是如何最好地设置列的宽度。我尝试设置不同元素的宽度（使用css），但它似乎永远不会正常工作。我希望桌子保持930px宽。

Answer 1

很多事情：

删除html中的onClick个绑定，使其变为a.btn-remove。
理想情况下，您希望将tr#clonerow作为html部分。我建议调查像Mustache之类的东西，不要重复你的UI标记。
创建一个jquery插件，如$.fn.formGrid或function formGrid(){}; formGrid.prototype.addRow = function(){}; formGrid.prototype.removeRow(){};，使您的表单逻辑更加模块化，封装（您的函数目前正在污染全局范围），并且可重用。然后将tr#buttonrow更改为tr.buttonrow。我建议将类似$formGrid的上下文jQuery对象存储为模块对象中的属性，因此如果需要，您可以拥有此动态订单表单的多个实例。

jQuery动态订单表单

1 个答案: