Question

我的页面上有一个动态表，用户可以从中添加行/删除行。所以假设用户增加了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
我需要在代码中添加/更改什么才能解决问题？

Answer 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

Answer 2

我没有尝试修复索引，而是创建一个隐藏变量，让我们称之为Index，每次添加新行时，您都会使用Index ++。

然后，当回发数据时，您可以使用类似这样的快速伪代码：

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

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

干杯！

Answer 3

也许不是最好的解决方案，但我通过消隐行值，然后更改hide（）for 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;
    });

HTML表附加，JQuery数组

3 个答案: