删除并重置表的其余部分的html表行id

时间:2015-07-30 08:52:15

标签: jquery html

如何在使用jquery删除行后重置html表行id和名称。例如,html表有5行,如果我删除第3行,那么实际的第4行和第5行文本框ID 应该变成3和4

<script type="text/javascript">
$("#add").on("click",function() {
var data ='<tr><td>2</td><td><input type="text" id="name2" value=""/></td><td><input type="text" id="phone2" value=""/></td><td><input type="text" id="email2" value=""/></td><td><button id="delete">Delete</button></td></tr>';
$("tbody").append(data);
});
</script>
<button id="add">Add Row</button>
<table>
<tbody>
<tr>
<td>1</td>
<td><input type="text" id="name1" value=""/></td>
<td><input type="text" id="phone1" value=""/></td>
<td><input type="text" id="email1" value=""/></td>
<td><button id="delete">Delete</button></td>
</tr>
</tbody>
</table>

2 个答案:

答案 0 :(得分:3)

首先,您必须为window.globalCounter = 2;声明一个全局计数器,用于存储行计数器。 (什么索引将添加行)

然后当你添加window.globalCounter++时增加。

当你删除时,你必须获取currentRow,减少计数器,并重构索引。

  $("tbody").on("click", "#delete", function (ev) {

        // delete row
        var $currentTableRow = $(ev.currentTarget).parents('tr')[0];
        $currentTableRow.remove();
        window.globalCounter--;

        // refactor indexes
        $('table').find('tr').each(function (index) {
            var firstTDDomEl = $(this).find('td')[0];
            var $firstTDJQObject = $(firstTDDomEl);
            $firstTDJQObject.text(index + 1);
        });

    });

这是一个有效的代码段。

&#13;
&#13;
window.globalCounter = 2;

$(document).ready(function () {
    $("#add").on("click", function () {
        var data = '<tr><td>' + window.globalCounter + '</td><td><input type="text" id="name2" value=""/></td><td><input type="text" id="phone2" value=""/></td><td><input type="text" id="email2" value=""/></td><td><button id="delete">Delete</button></td></tr>';
        $("tbody").append(data);
        window.globalCounter++;
    });

    $("tbody").on("click", "#delete", function (ev) {
        var $currentTableRow = $(ev.currentTarget).parents('tr')[0];
        $currentTableRow.remove();
        window.globalCounter--;
        
        $('table').find('tr').each(function (index) {
            var firstTDDomEl = $(this).find('td')[0];
            var $firstTDJQObject = $(firstTDDomEl);
            $firstTDJQObject.text(index + 1);
        });
    });


});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="add">Add Row</button>
<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <input type="text" id="name1" value="" />
            </td>
            <td>
                <input type="text" id="phone1" value="" />
            </td>
            <td>
                <input type="text" id="email1" value="" />
            </td>
            <td>
                <button id="delete">Delete</button>
            </td>
        </tr>
    </tbody>
</table>
&#13;
&#13;
&#13;

在这里,你有一个替代工作jsfiddle:https://jsfiddle.net/cn5p4oke/

当然,您必须调整phone2,email2,name2 ID。

请注意我使用的是jQuery 2.1.0。

答案 1 :(得分:0)

...
/dev/sda9 : 50 GB(49,999,249,408 bytes)