yangpeng-jingjing

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

分类:

技术点:

相关文章: