Как сохранить серийный номер, чтобы остаться с последовательностью в HTML-таблице с динамическим добавлением / удалением?

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

Я думаю, что функция 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;
            });
        });

Answer 4

Вы можете просто взять полученный массив после редактирования записей и циклично установить новые идентификаторы записей. Вы можете получить массив записей из этой таблицы?