当我们删除一行表格时候，就会造成前面的序号也被删除了，我们需要对前面的序号进行重新排列
我最先开始的想法是找到删除的这一行，然后他后面的所有行的序号都减去1，但是这样实现起来还没有把整个表格的序号重排简单
所以选择后面一种方法，将删除后的表格的序号重新排列。
发现自己还是很不熟悉，很多基础的东西都没有深深的理解和记牢，以后一定要抓紧时间多多学习，多多记忆才行！~~
今天自己动手把这个问题练习了一遍。
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table删除一行保持序号不变</title>
<script type="text/javascript" src="jquery-1.3.2.min.js" language="javascript"></script>
<style>
.container{
width:520px;
margin:10px auto;
}
.tab td,.tab th{
border:1px solid #000000;
}
.tab th{
background:#66CCFF;
}
.tit{
padding-left:8px;
}
table{
border-collapse:collapse;
width:500px;
}
</style>
<script>
function delete_row(row){
$(row).parents("tr").remove();
var num = $("#tab tbody tr").length;
var trs = $("#tab tbody tr");
for(i=0;i<num;i++){
trs.find("td:first").each(function(i){
$(this).text(i+1);
});
}
}
</script>
</head>
<body>
<div class="container">
<table class="tab" cellpadding="0" cellspacing="0" id="tab">
<thead>
<tr>
<th width="60">序号</th>
<th>标题</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">2</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">3</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">4</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">5</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">6</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">7</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">8</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">9</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
<tr>
<td align="center">10</td>
<td class="tit">好好学习，天天向上</td>
<td align="center"><input type="button" value="删除" onclick="delete_row(this)"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
function delete_row(row){
$(row).parents("tr").remove();
var num = $("#tab tbody tr").length;
var trs = $("#tab tbody tr");
for(i=0;i<num;i++){
trs.find("td:first").each(function(i){
$(this).text(i+1);
});
}
}
首先点击的时候，将点击的td的父元素（也就是当前td所在的tr）将他移除掉
接着我们就要对table的序号进行重新排列了，首先我们取到删除一行后剩下tr的个数num，座位for循环的length
接着我们找到这些tr的第一个td，然后遍历每一个td使得他的内容为相应的数字。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
