如何在使用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>
答案 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);
});
});
这是一个有效的代码段。
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;
在这里,你有一个替代工作jsfiddle:https://jsfiddle.net/cn5p4oke/
当然,您必须调整phone2,email2,name2 ID。
请注意我使用的是jQuery 2.1.0。
答案 1 :(得分:0)
...
/dev/sda9 : 50 GB(49,999,249,408 bytes)