Question

我有这样的标记

<table>
<tr class="resource-data">
    <td>
        <select name="resource[product-name][0]" class="resource-product-name resource" data-name="resource[product_name]">
            <option value="apple" data-id="apple">Apple</option>
            <option value="bus" data-id="bus">Bus</option>
            <option value="car" data-id="car">Car</option>
            <option value="duster" data-id="duster">Duster</option>
        </select>
    </td>
    <td><input type="text" class="product-type" name="resource[product_type][0]" 
            data-name="resource[product_type]"></td>
    <td><input type="text" class="product-class" name="resource[product_class][0]" 
            data-name="resource[product_class]"></td>
</tr>
</table>
<button type="button" class="btn btn-success pull-right add-new-data"> Add </button>

在这里你可以看到我在属性的名称中使用了0的数组。现在，当我从表中获取带有增量顺序的数据时，我的标记就像这样

Html代码

<table>
<tr class="resource-data">
    <td>
        <select name="resource[product-name][0]" class="resource-product-name resource" data-name="resource[product_name]">
            <option value="apple" data-id="apple">Apple</option>
            <option value="bus" data-id="bus">Bus</option>
            <option value="car" data-id="car">Car</option>
            <option value="duster" data-id="duster">Duster</option>
        </select>
    </td>
    <td><input type="text" class="product-type" name="resource[product_type][0]" 
        data-name="resource[product_type]"></td>
    <td><input type="text" class="product-class" name="resource[product_class][0]" 
            data-name="resource[product_class]"></td>
</tr>
<tr class="resource-data">
    <td>
        <select name="resource[product-name][1]" class="resource-product-name resource" data-name="resource[product_name]">
            <option value="apple" data-id="apple">Apple</option>
            <option value="bus" data-id="bus">Bus</option>
            <option value="car" data-id="car">Car</option>
            <option value="duster" data-id="duster">Duster</option>
        </select>
    </td>
    <td><input type="text" class="product-type" name="resource[product_type][1]" 
        data-name="resource[product_type]"></td>
    <td><input type="text" class="product-class" name="resource[product_class][1]" 
            data-name="resource[product_class]"></td>
</tr>       
</table>
<button type="button" class="btn btn-success pull-right add-new-data"> Add </button>

现在，当我使用js添加带有此代码的增量编号的另一行

时

JS代码

jQuery(document).ready(function() {
        var Clone = jQuery('table tr.resource-data:first').clone();
        jQuery('body').on('click','button.add-new-data', function() {
            var GetRows = $("table tr.resource-data").length;
            var ParentRow = $("table tr.resource-data").last();
            Clone.clone(true).insertAfter(ParentRow);
            ParentRow.find("select.resource").each(function() {
                var currentName = $(this).attr("data-name");
                $(this).attr("name", currentName + "["+GetRows+"]");
            });
            ParentRow.find("input.product-type").each(function() {
                var currentName = $(this).attr("data-name");
                $(this).attr("name", currentName + "["+GetRows+"]");
            });
            ParentRow.find("input.product-class").each(function() {
                var currentName = $(this).attr("data-name");
                $(this).attr("name", currentName + "["+GetRows+"]");
            });                         
        });
    });

两次递增数字0。这是工作fiddle。那么有人可以告诉我如何解决这个问题。任何帮助和建议都是非常可取的。感谢

Answer 1

请在此处查看http://jsfiddle.net/5mp7hnsp/1/

您每次点击添加按钮时都克隆了第一个元素并使用它。

这就是为什么新添加的行最终得到索引为零。

虽然你试图在插入后改变它们的子属性，但它没有意义，因为你选择了目标元素，而不是你之后应该操作的添加元素。

jQuery(document).ready(function() {
    var Clone = jQuery('table tr.resource-data:first').clone();
    jQuery('body').on('click','button.add-new-data', function() {
        var GetRows = $("table tr.resource-data").length;
        var ParentRow = $("table tr.resource-data").last();
        Clone.clone(true).insertAfter(ParentRow);
        var newRow = $("table tr.resource-data").last();
        newRow.find("select.resource").each(function() {
            var currentName = $(this).attr("data-name");
            $(this).attr("name", currentName + "["+GetRows+"]");
        });
        newRow.find("input.product-type").each(function() {
            var currentName = $(this).attr("data-name");
            $(this).attr("name", currentName + "["+GetRows+"]");
        });
        newRow.find("input.product-class").each(function() {
            var currentName = $(this).attr("data-name");
            $(this).attr("name", currentName + "["+GetRows+"]");
        });                         
    });
});

jQuery增量号码id冲突

1 个答案: