jQuery實現表格行的動態增加與刪除 序號 從 1開始排列

標籤：order   div   onclick   function   replace   script   rem   val   var   

<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>

jQuery實現表格行的動態增加與刪除 序號 從 1開始排列