删除表格行之后 动态改变序号

$(document).on('click','.edits',function(){
            $(this).parent().parent().remove();//删除当前行
            $(".index").each(function(x){    //重新排序
                $(this).val(x+1);
            })
         });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤实现: 1. 在 HTML 中,为表格添加一个 id,并在表头中添加“序号”列。 ```html <table id="myTable"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>20</td> </tr> <tr> <td>2</td> <td>李四</td> <td>22</td> </tr> </tbody> </table> ``` 2. 在 JavaScript 中,获取表格和添加/删除按钮的引用,并为它们添加事件处理程序。 ```javascript var table = document.getElementById('myTable'); var addBtn = document.getElementById('addBtn'); var delBtn = document.getElementById('delBtn'); addBtn.addEventListener('click', addRow); delBtn.addEventListener('click', delRow); ``` 3. 实现添加的函数,该函数将在表格末尾添加一,并更新所有序号。 ```javascript function addRow() { var tbody = table.getElementsByTagName('tbody')[0]; var newRow = tbody.insertRow(); var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var rowCount = tbody.getElementsByTagName('tr').length; cell1.innerHTML = rowCount; cell2.innerHTML = '<input type="text">'; cell3.innerHTML = '<input type="text">'; updateIndex(); } ``` 4. 实现删除的函数,该函数将删除表格中最后一,并更新所有序号。 ```javascript function delRow() { var tbody = table.getElementsByTagName('tbody')[0]; var rowCount = tbody.getElementsByTagName('tr').length; if (rowCount > 1) { tbody.deleteRow(rowCount - 1); updateIndex(); } } ``` 5. 实现更新序号的函数,该函数将遍历表格中的所有,并将每一序号更新为当前号。 ```javascript function updateIndex() { var tbody = table.getElementsByTagName('tbody')[0]; var rows = tbody.getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { rows[i].getElementsByTagName('td')[0].innerHTML = i + 1; } } ``` 6. 最后,在 HTML 中添加“添加”和“删除”按钮,并将它们的 id 分别设置为“addBtn”和“delBtn”。 ```html <button id="addBtn">添加</button> <button id="delBtn">删除</button> ``` 完成以上步骤后,就可以实现一个可以动态添加序号、增加一删除表格了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值