Question

我有一个如下表格，可以使用添加/删除按钮添加和删除其行。

<table class="dynatable">
    <thead>
        <tr>
            <th><button class="add">Add</button></th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="prototype">
            <td><input type="text" name="id[]" value="0" class="id" /></td>
            <td><input type="text" name="name[]" value="" /></td>
            <td><input type="text" name="col4[]" value="" /></td>
            <td><input type="text" name="col3[]" value="" /></td>
        </tr>
    </tbody>
</table>

表格中的第一列包含序列号。但是当它们之间的行被删除时，它正在失去它的序列。

例如，如果有行5行，序列顺序为1,2,3,4,5

如果删除序列号为3的行，序列号将丢失序列为1,2,4,5

但是我希望第一列中的序列号在从五行中删除一行后保持序列1,2,3,4

如果我添加5行并删除所有行并开始再次添加行。序列从6而不是1开始。

我怎样才能使用jQuery？

Answer 1

当像这样删除某些内容时，我会重新计算整个序列：

http://jsfiddle.net/5HCVX/16/

function recalcId(){
    $.each($("table tr.item"),function (i,el){
        $(this).find("td:first input").val(i + 1); // Simply couse the first "prototype" is not counted in the list
    })
}

当删除某些内容时，只需要删除id

Answer 2

$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone();
                prot.attr("class", id + " item")
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
                prot.append('<td><button class="remove">Remove</button></td>');
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();
                id--; //simon was missing this now it's perfect
                recalcId();
            });
        });

function recalcId(){
    $.each($("table tr.item"),function (i,el){
        $(this).find("td:first input").val(i + 1); // Simply couse the first "prototype" is not counted in the list
    })
}

Answer 3

您可以在编辑记录之后简单地获取结果数组，并在循环中设置新记录ID。你能从这张表中得到一系列记录吗？

Answer 4

我认为size（）函数在这里可能很有用。拿你的代码，我添加了行

id = $('table.dynatable tbody tr').size() -1

。。。到“删除按钮”功能。所以整个JS现在都是：

$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone();
                prot.attr("class", id)
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
                prot.append('<td><button class="remove">Remove</button></td>');
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();
                id = $('table.dynatable tbody tr').size() -1;
            });
        });

如何保持序列号与动态添加/删除的html表中的序列保持一致？

4 个答案: