jQuery实现表格行的动态增加与删除 序号 从 1开始排列

Posted 2020-08-16 Debugs

<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
<tr>
<td width="20%">序</td>
<td >标题</td>
<td >描述</td>
<td >操作</td>
</tr>
</table>
<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value="增加" />

</div>
<script>
$(document).ready(function () {
$("#tab tr").attr("align", "center");
$("#but").click(function () {
var _len = $("#tab tr").length;
$("#tab").append("<tr id=" + _len + " align=‘center‘>"
+ "<td>" + _len + "</td>"
+ "<td>Dynamic TR" + _len + "</td>"
+ "<td><input type=‘text‘ name=‘desc" + _len + "‘ id=‘desc" + _len + "‘ /></td>"
+ "<td><a href=\‘#\‘ onclick=\‘deltr(" + _len + ")\‘>删除</a></td>"
+ "</tr>");
})
})
//删除<tr/>
var deltr = function (index) {
var _len = $("#tab tr").length;
$("tr[id=‘" + index + "‘]").remove();//删除当前行
for (var i = index + 1, j = _len; i < j; i++) {
var nextTxtVal = $("#desc" + i).val();
$("tr[id=\‘" + i + "\‘]")
.replaceWith("<tr id=" + (i - 1) + " align=‘center‘>"
+ "<td>" + (i - 1) + "</td>"
+ "<td>Dynamic TR" + (i - 1) + "</td>"
+ "<td><input type=‘text‘ name=‘desc" + (i - 1) + "‘ value=‘" + nextTxtVal + "‘ id=‘desc" + (i - 1) + "‘/></td>"
+ "<td><a href=\‘#\‘ onclick=\‘deltr(" + (i - 1) + ")\‘>删除</a></td>"
+ "</tr>");
}

}
</script>