基于JavaScript实现动态添加删除表格的行

又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。

1.jsp

<table id="viewTabs">

<thead>

<tr>

<th>产品名称</th>

<th>编号</th>

<th>数量</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; //表格的列数

//表格当前的行数

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实现动态添加删除表格的行，希望对大家有所帮助。