快捷導航

基于JavaScript實現(xiàn)動態(tài)添加刪除表格的行

更新時間：2016年02月01日 11:27:16 作者：風中帆

又一個動態(tài)控制表格的效果，用JavaScript動態(tài)生成表格行、表格列，以及還可動態(tài)刪除這些行列，行等，運行代碼后，點擊對應(yīng)的功能按鈕，即可實現(xiàn)對應(yīng)的表格操作功能，接下來通過代碼實例給大家介紹JavaScript實現(xiàn)動態(tài)添加刪除表格的行，需要的朋友參考下

又一個動態(tài)控制表格的效果，用JavaScript動態(tài)生成表格行、表格列，以及還可動態(tài)刪除這些行列，行等，運行代碼后，點擊對應(yīng)的功能按鈕，即可實現(xiàn)對應(yīng)的表格操作功能。

1.jsp

<table id="viewTabs">
<thead>
<tr>
<th>產(chǎn)品名稱</th>
<th>編號</th>
<th>數(shù)量</th>
<th>重量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="productName" type="text"></td>
<td><input name="productNumber" type="text"></td>
<td><input name="quantity" type="text"></td>
<td><input name="weight" type="text"></td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" onclick="addTable();" style="margin-left: 750px;">添加行</button>

2.js

//添加行
function addTable(){
var tab=document.getElementById("viewTabs"); //獲得表格
var colsNum=tab.rows.item(0).cells.length; //表格的列數(shù)
//表格當前的行數(shù) 
var num=document.getElementById("viewTabs").rows.length;
var rownum=num;
tab.insertRow(rownum);
for(var i=0;i<4; i++)
{
tab.rows[rownum].insertCell(i);//插入列
if(i==0){
tab.rows[rownum].cells[i].innerHTML=
'<input name="productName" type="text"/>';
}else if(i==1){
tab.rows[rownum].cells[i].innerHTML='<input name="productNumber" type="text"/>';
}else if(i==2){
tab.rows[rownum].cells[i].innerHTML='<input name="quantity" type="text"/>';
}else{
tab.rows[rownum].cells[i].innerHTML='<input name="weight" type="text"/>';
}
}
tab.rows[rownum].insertCell(i);
tab.rows[rownum].cells[i].innerHTML='<a href="#" onclick="delRow(this)">刪除行</a>';
}
//刪除行
function delRow(obj)
{
var Row=obj.parentNode;
var Row=obj.parentNode; //tr
while(Row.tagName.toLowerCase()!="tr")
{
Row=Row.parentNode;
}
Row.parentNode.removeChild(Row); //刪除行
}

以上所述是小編給大家分享的JavaScript實現(xiàn)動態(tài)添加刪除表格的行，希望對大家有所幫助。

您可能感興趣的文章: