剛學(xué)習(xí)jquery不久，今天來(lái)玩下表格的動(dòng)態(tài)實(shí)現(xiàn)，網(wǎng)上找了一篇文章來(lái)參考，稍作修改就放上來(lái)了，以便以后學(xué)習(xí)，參考自：
http://www.tkk7.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;//得到總行數(shù)
var tableElement = $("#testTable");//得到表格對(duì)象
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++){//循環(huán)所刪除那個(gè)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">序號(hào)</td>
<td align="center">標(biāo)題</td>
<td align="center">操作</td>
</tr>
</table>
</body>
</html>
posted on 2009-05-05 21:23
老丁 閱讀(3732)
評(píng)論(3) 編輯 收藏 所屬分類:
jquery