HTML 表格追加，JQuery 数组答案

【问题标题】：HTML Table Append, JQuery ArrayHTML 表格追加，JQuery 数组
【发布时间】：2012-09-22 18:55:29
【问题描述】：

我的页面上有一个动态表，用户可以从中添加行/删除行。因此，假设用户添加了 6 个人。第一个名称数组如下所示：

Index:    0   1   2   3   4   5
Person#:  1   2   3   4   5   6

假设用户删除了前三行，那么名字数组将如下所示：

Index:    0   1   2   3   4   5
Person#:              4   5   6

最后，用户再添加三个人，数组将是这样的：

Index:    0   1   2   3   4   5
Person#:              7   8   9

这就是我遇到的问题。删除一行时，如何适当地移动 jquery 数组，而不是像这样：

Index:    0   1   2   3   4   5
Person#:              4   5   6

看起来像这样：

Index:    0   1   2   3   4   5
Person#:  4   5   6

这是我的代码的一个工作示例：demo
我需要在代码中添加/更改什么来解决问题？

【问题讨论】：

标签： jquery html html-table append dynamic-tables

【解决方案1】：

我通常只是简单地重新编号属性值。像这样的：

$("#table").find('tr').each(function(index, element)
{
    var row = $(this);

    index --;

    var names = ['fname_new', 'lname_new', 'phone_new', 'email_new', 'ethnicity_new'];
    for(var i in names)
    {
        row.find('input[name^="' + names[i] + '"]').attr('name', '' + names[i] + '[' + index + ']');
    }
});

http://jsbin.com/icutuj/3/edit

【讨论】：

不幸的是，这不起作用。它仍然做了我上面描述的事情
我们在谈论不同的事情吗？它对我来说很好：jsbin.com/icutuj/8/edit（添加/删除行后单击序列化按钮）

【解决方案2】：

也许不是最好的解决方案，但我通过将行值清空，然后将 delete() 更改为 hide() 来解决这个问题。并且不保持行数。希望有更好的解决方案。

    $('div#editPhoneDlg').delegate('a.remove[href^=#]', 'click', function () {

        var row = $(this).parent().parent();
        if (rowCount > 1) {
            var name = $(row).find('td.name input');
            name.val('');
            var address = $(row).find('td.address input');
            address.val('');
            var phone = $(row).find('td.phone input');
            phone.val('');
            row.hide();
        }
        else {
            var name = $(row).find('td.name input');
            name.val('');
            var address = $(row).find('td.address input');
            address.val('');
            var phone = $(row).find('td.phone input');
            phone.val('');
        }
        return false;
    });

【讨论】：

【解决方案3】：

我所做的不是试图修复索引，而是创建一个隐藏变量，我们称之为索引，每次添加新行时都会添加索引++。

然后，当数据回传时，你可以得到类似这样的快速伪代码：

for (int i = 0; i++ i<$index) {
   var person = $POST[person_$index];
   if (person != null) {
     //do something
   }
}

通过这种方式，您并不真正关心他们删除了多少记录。

干杯！

【讨论】：