刚学习jquery不久，今天来玩下表格的动态实现，网上找了一篇文章来参考，稍作修改就放上来了，以便以后学习，参考自：
http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function gotoAdd(){
var tableTrElement = $("#testTable tr");//得到表格所有行
var len = tableTrElement.length;//得到总行数
var tableElement = $("#testTable");//得到表格对象
tableElement.append("<tr id=test"+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>ding"+len+"</td><td align=\'center\'><input type=\'button\' value=\'delete\' onclick=\'gotoDelete("+(len+1)+")\'/></td></tr>");
}
function gotoDelete(index){
var tableTrElement = $("#testTable tr");
if(index>tableTrElement.length){
return;
}else{
$("tr[id=\'test"+index+"\']").remove(); //移除id为 "test"+index 的TR
for(var temp=index+1;temp<=tableTrElement.length;temp++){//循环所删除那个TR后面的所有TR
$("tr[id=\'test"+temp+"\']").replaceWith("<tr id=test"+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>ding"+(temp-2)+"</td><td align=\'center\'><input type=\'button\' value=\'delete\' onclick=\'gotoDelete("+(temp-1)+")\'/></td></tr>");
}
}
}
</script>
</head>
<body>
<input type="button" value="添加行" onclick="gotoAdd()">
<table id="testTable" border="1" width="80%" align="center">
<tr>
<td width="20%" align="center">序号</td>
<td align="center">标题</td>
<td align="center">操作</td>
</tr>
</table>
</body>
</html>
posted on 2009-05-05 21:23
老丁 阅读(3706)
评论(3) 编辑 收藏 所属分类:
jquery