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

上述就是小編為大家分享的jquery中怎么動態增加表格了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。