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的库