-2

我制作了一个动态表单，但是当我动态插入字段时，名称和 ID 没有正确更改。

这是我的代码：

<div id="dataRows">
<div class="fieldRow" id="template">
    <select class="items" name="items{{counter}}" id="items{{counter}}" style="width:127px; float:left;"><option value="1" selected="selected" disabled="disabled"></option></select>
     <textarea name="description{{counter}}" id="description{{counter}}" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;"></textarea>
     <input type="text" name="unitprice{{counter}}" id="unitprice{{counter}}" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;">
     <input type="text" name="quantity{{counter}}" id="quantity{{counter}}" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;">
     <select name="firsttax{{counter}}" id="firsttax{{counter}}" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;"><option value="1" selected="selected" ></option></select>
     <select name="secondtax{{counter}}" id="secondtax{{counter}}" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select>
     <input type="text" name="linetotal{{counter}}" id="linetotal{{counter}}" class="linetotal" placeholder="0.00" readonly style="float:right; display: block; height: 31px; width:107px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -31px -1px 0;">       
    <input type="button"  class="button remove"  id="btnDel" value="Remove Row" style="float:right; margin:-29px -110px; color: #ffffff; background-color: #d9534f; border-color: #d43f3a; padding: 3px 10px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer;  border:1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;" />
    </div>
 </div>

这是我的动态字段的java脚本代码：

jQuery(document).on("ready", function () {
    initAddRows();
});

function initAddRows() {
    var template = jQuery("#template"),
        dataRows = jQuery("#dataRows")
        jQuery("#btnAdd").on("click", function () {
            var newRow = template.clone(true, true),
                fieldRows = dataRows.find(".fieldRow"),
                rowNumber = fieldRows.length + {
                    {
                        counter
                    }
                };
            newRow.attr('id', 'row' + rowNumber).find('[id]').each(function () {
           jQuery(this).attr("id", jQuery(this).attr("id") + rowNumber);
           jQuery(this).attr("name", jQuery(this).attr("name") + rowNumber);
           $('#itemscounter').val(+rowNumber);
            });
            fieldRows.filter(":last").after(newRow);
        });
}

我的字段值是 items9、description9 和我的 {{counter}}=9，当我生成字段时，字段的名称是 items910、description910，但我希望名称和 ID 是 items10、description10。

我该怎么做？

4

1 回答 1

1

如果您知道您的 id 始终是“descriptionXX”，请使用"description" + rowNumber代替jQuery(this).attr("id") + rowNumber（与 相同"item" + rowNumber）。

于 2013-10-21T16:08:21.503 回答