看了好多人问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>

<tr>

<td colspan="7">

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

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

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

<input type="button" value="保存">&nbsp;&nbsp;&nbsp;

<input type="button" value="取消">&nbsp;&nbsp;&nbsp;

</td>

</tr>

<tr>

<td></td>

<td></td>

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

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

</tr>

<tr>

<td></td>

<td><input type="checkbox"></td>

<td><span>代號</span></td>

<td><span>民稱</span></td>

<td><span>代號</span></td>

<td><span>中文名稱</span></td>

<td><span>英文名稱</span></td>

</tr>

</table>

第二种：直接在添加的一行添加删除按钮：

js：

<script>

$(function(){

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

var tr="<tr>"+

"<td>01</td>"+

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

"<td><input type="button"/></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><tr><td>序号</td><td>标题</td><td>操作</td></tr></table>

另外导入jquery的库

本文出自 “IT邋遢员” 博客，请务必保留此出处