剛學習jquery不久，今天來玩下表格的動態實現，網上找了一篇文章來參考，稍作修改就放上來了，以便以后學習，參考自：
http://www.aygfsteel.com/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
老丁 閱讀(3744)
評論(3) 編輯 收藏 所屬分類:
jquery