js 动态新增一行，删除一行 序号有关问题
日期：2014-05-16 浏览次数：20432 次
js 动态新增一行，删除一行 序号问题
js 动态新增一行，删除一行 序号问题 如 最开始 序号为 1 ，2 ，3 ，4
删除其中的一行后 序号 变为 1,2,3
------解决方案--------------------
js 动态新增一行，删除一行 序号问题 如 最开始 序号为 1 ，2 ，3 ，4
删除其中的一行后 序号 变为 1,2,3
------解决方案--------------------
- JScript code
<html>
<head>
<meta http-equiv="blog" content="blog.csdn.net/IBM_hoojo">
<meta http-equiv="email" content="hoojo_@126.com">
<meta http-equiv="author" content="hoojo">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
table {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif
}
td {
text-align: center;
background: #FFF
}
tr {
height: 20px;
}
th {
background: #9DACBF;
color: #FFF;
height: 20px;
line-height: 20px
}
a {
color: #99C;
}
a:hover {
color: #F93
}
.input td {
padding: 2px
}
.input input {
width: 100%;
border: 1px solid #000;
overflow: hidden
}
</style>
<script type="text/javascript">
//简化document.getElementById()方法
function $(obj) {
return document.getElementById(obj);
}
//删除行
function delRow(e) {
var evt = e || event;
var targetTable = $("nw");
targetTable.deleteRow(~~evt.target.parentNode.parentNode.cells[0].innerHTML);
for (var i = 0; i<targetTable.rows.length; i++) {
if (i != 0)
targetTable.rows[i].cells[0].innerHTML = i;
}
}
</script>
<title>Javascript控制表格 实现动态添加和删除表格内容</title>
</head>
<body>
<table id="nw" cellpadding="0" cellspacing="1" border="0" width="320" bgcolor="#CCCC99">
<th>编号</th>
<th>名称</th>
<th>操作</th>
<tr class="input">
<td>1</td>
<td><input type="text" id="add" /></td>
<td style="width: 52px" onClick="delRow(event)"><input type="button" value="删 除" class="btn" /></td>
</tr>
<tr class="input">
<td>2</td>
<td><input type="text" id="add" /></td>
<td style="width: 52px" onClick="delRow(event)"><input type="button" value="删 除" class="btn" /></td>
</tr>
<tr class="input">
<td>3</td>
<td><input type="text" id="add" /></td>
<td style="width: 52px" onClick="delRow(event)"><input type="button" value="删 除" class="btn" /></td>
</tr>
<tr class="input">
<td>4</td>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
