jquery動態增加表格，刪除表格

看了好多人問jquery動態添加表格。寫了一遍又一遍，現在決定寫在這兒吧，讓不會的人來看看。

第一種，在表格上面有個刪除按鈕，刪除下面複選框的選中的值。

js：

<script>

$(function(){

$("#addrow").click(function(){

var len=document.getElementById("table1").getElementsByTagName("tr").length;

len = len-2;

var tr="<tr>"+

"<td>"+len+"</td>"+

"<td><input type=\"checkbox\" id=\"check1\" name=\"check\" onclick=\"check()\"></td>"+

"<td>01</td>"+

"<td>職稱</td>"+

"<td>01</td>"+

"<td>董事長</td>"+

"<td>boss</td>"+

"</tr>";

　 　$("#table1").append(tr);　　

});

$("#delrow").click(function(){

var check = document.getElementsByName("check");

for(var i=0;i<check.length;i++){

if(check[i].checked){

document.getElementById('table1').deleteRow(i+3);

i--;

}

}

})

})

</script>

jsp:

<table align="center" id="table1">

<tr>

<td colspan="7" id="buttons" width="600px">

<input type="button" value="帥選器" id="button1">&nbsp;&nbsp;&nbsp;

<input type="button" value="新增" id="addrow" >&nbsp;&nbsp;&nbsp;

<input type="button" value="刪除" id="delrow" >&nbsp;&nbsp;&nbsp;

<input type="button" value="儲存" id="button4" onclick="save();">&nbsp;&nbsp;&nbsp;

<input type="button" value="取消" id="button5" onclick="resets();">&nbsp;&nbsp;&nbsp;

</td>

</tr>

<tr>

<td width="20px"></td>

<td></td>

<td colspan="2" align="center">編號類別</td>

<td colspan="3" align="center">基礎編號 </td>

</tr>

<tr>

<td width="20px"></td>

<td><input type="checkbox" id="checkAll" onclick="checkAll(this)"></td>

<td><span class="typeName">代號</span></td>

<td><span class="typeName">民稱</span></td>

<td><span class="typeName">代號</span></td>

<td><span class="typeName">中文名稱</span></td>

<td class="typeName"><span class="typeName">英文名稱</span></td>

</tr>

</table>

第二種：直接在添加的一行添加刪除按鈕：

js：

<script>

$(function(){

$("#addrow").click(function(){

var tr="<tr>"+

"<td>01</td>"+

"<td>董事長</td>"+

"<td><input type="button" onclick="dele(this)"/></td>"+

"</tr>";

　 　$("#table1").append(tr);　　

});

})

function dele(r){

var len=$("#table1 tr").length;

if(len==2){

alert("您不能刪除表頭");

return;

}

if(confirm("確定刪除?")){

var i=r.parentNode.parentNode.rowIndex;

document.getElementById('table1').deleteRow(i);

}

}

</script>

jsp中：

<talbe id="table1"><tr><td>序號</td><td>標題</td><td>操作</td></tr></table>

另外匯入jquery的庫

本文出自 “IT邋遢員” 部落格，請務必保留此出處http://3795780.blog.51cto.com/3785780/1303421