Question

我正在动态添加或删除div元素。我的示例html看起来像：

<!-- 1st dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
        </tr>
    </tbody>
</table>
</div>
<!-- 2nd dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
        </tr>
    </tbody>
</table>
</div>

在这里，我使用jquery clone添加了第二个动态块。现在点击＆＃39;下一步＆＃39;按钮我需要在提交页面之前重置名称属性索引。因此，对于第1和第2块名称属性将成为命名=＆＃34;细节[0] .lan＆＃34; 命名=＆＃34;细节[1] .lan＆＃34;

请在JQuery中提供一些解决方法。

Answer 1

如果您只想重新同步名称，请执行以下操作。请记住，您应该重新同步ID，以及ID应该是唯一的。

$('div table :text').each(function(i) {
    $(this).attr({
        'id': 'lan-' + (i+1).toString(),
        'name': 'details[' + i + '].lan'
    });
});

更新代码

这将允许您更新所有内容，无论名称如何。

$('div table :text').each(function(i) {
    var id = $(this).attr('id');
    var name = $(this).attr('name');

    id = id.replace(/-\d+/g, '-' + (i+1));
    name = name.replace(/\[\d+\]/g, '[' + i + ']');
    $(this).attr({
        'id': id,
        'name': name
    });
});

http://jsfiddle.net/dklingman/baURf/

Answer 2

克隆并添加表格后，您可以执行类似的操作

var last_tbl = $(".table-condensed:last");
var last_index = $(".table-condensed").length;
last_tbl.find("input").attr("id","lan-" + last_index).attr("name","details["+ (last_index - 1) +"].lan");

Answer 3

克隆后你应该试试这个

var input = $('.dynamic-wrap input').attr('name','details');
$.each(input,function(index,value){
    $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
});

更新

    var input = $('.dynamic-wrap input').attr('name','details');

    function resetTheOrder(){
    $.each(input,function(index,value){
        $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
     });
    }

添加一些新div后调用resetTheOrder()函数，或者删除它会重新计算订单..

Answer 4

我添加了两个新行，一个按钮'ADD'，再加上删除行（我刚刚复制了你的html）

<!-- 1st dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
<!-- 2nd dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
    <div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
        <div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
    <input type="button" id="add" name="add" value="ADD">

添加后，删除该功能会重置该行，因此在提交之前，您将发送重置/新排序的值

var input = $('.dynamic-wrap input').attr('name','details');

    function resetTheOrder(){
    $.each(input,function(index,value){
        $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
     });
    }

$('#add').on('click',function(){
// after adding new row
    resetTheOrder();
});

$('.remove').on('click',function(){
// after deleting new row
    resetTheOrder();
});

JQuery在动态添加或删除行后重置所有索引

4 个答案: