js 动态新增一行，删除一行序号问题

js 动态新增一行，删除一行序号问题如最开始序号为 1 ，2 ，3 ，4
删除其中的一行后序号变为 1,2,3

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<meta http-equiv="blog" content="blog.csdn.net/IBM_hoojo">
    <meta http-equiv="email" content="[email protected]">
    <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>
<td><input type="text" id="add" /></td>
<td style="width: 52px" onClick="delRow(event)"><input type="button" value="删除" class="btn" /></td>
</tr>
</table>
</body>
</html>
从mvc角度来说m.delete(id);
c.fill( ){v.fill(m.getList())  }也就是删除后重新刷新界面
jquery代码：
$(function(){   $("#input1").click(function(){
   alert("增加一行");
  var trLen =  $("#table1").find("tr").length ;
    $("#table1").append("<tr><td>"+trLen+"</td><td>xx</td></tr>")
});$("#input2").click(function(){
   alert("删除一行");
    var trLen =  $("#table1").find("tr").length ;
    $("#table1").find("tr:eq("+(trLen-1)+")").remove() ;
});
});<table id="table1" border="1px">
<th>序号</th><th>内容</th>
<tr><td>1</td><td>xx</td></tr>
<tr><td>2</td><td>xx</td></tr>
</table><input type="button" id="input1" name="input1" value="添加一行"></input>
<input type="button" id="input2" name="input2" value="删除一行"></input>
<html>
<head>
<meta http-equiv="blog" content="blog.csdn.net/IBM_hoojo">
    <meta http-equiv="email" content="[email protected]">
    <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;
    }
}

function addRow() {
var targetTable = $("nw");
var index = targetTable.rows.length;
var newRow = targetTable.insertRow(index);
newRow.innerHTML = '<tr class="input"><td>' + index + '</td><td><input type="text" id="add" /></td><td style="width: 52px" onClick="delRow(event)"><input type="button" value="删除" class="btn" /></td></tr>';
}
</script>
<title>Javascript控制表格实现动态添加和删除表格内容</title>
</head>
<body>
<input type="button" value="增加" class="btn" onclick="addRow()"/>
<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>
<td><input type="text" id="add" /></td>
<td style="width: 52px" onClick="delRow(event)"><input type="button" value="删除" class="btn" /></td>
</tr>
</table>
</body>
</html>
能不能用jquery写一个呀分数全是你的

js 动态新增一行，删除一行 序号问题

解决方案 »

js 动态新增一行，删除一行序号问题