基于JavaScript实现动态添加删除表格的行
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。
1.jsp
<tableid="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><inputname="productName"type="text"></td> <td><inputname="productNumber"type="text"></td> <td><inputname="quantity"type="text"></td> <td><inputname="weight"type="text"></td> <td></td> </tr> </tbody> </table> <buttontype="button"onclick="addTable();"style="margin-left:750px;">添加行</button>
2.js
//添加行
functionaddTable(){
vartab=document.getElementById("viewTabs");//获得表格
varcolsNum=tab.rows.item(0).cells.length;//表格的列数
//表格当前的行数
varnum=document.getElementById("viewTabs").rows.length;
varrownum=num;
tab.insertRow(rownum);
for(vari=0;i<4;i++)
{
tab.rows[rownum].insertCell(i);//插入列
if(i==0){
tab.rows[rownum].cells[i].innerHTML=
'<inputname="productName"type="text"/>';
}elseif(i==1){
tab.rows[rownum].cells[i].innerHTML='<inputname="productNumber"type="text"/>';
}elseif(i==2){
tab.rows[rownum].cells[i].innerHTML='<inputname="quantity"type="text"/>';
}else{
tab.rows[rownum].cells[i].innerHTML='<inputname="weight"type="text"/>';
}
}
tab.rows[rownum].insertCell(i);
tab.rows[rownum].cells[i].innerHTML='<ahref="#"onclick="delRow(this)">删除行</a>';
}
//删除行
functiondelRow(obj)
{
varRow=obj.parentNode;
varRow=obj.parentNode;//tr
while(Row.tagName.toLowerCase()!="tr")
{
Row=Row.parentNode;
}
Row.parentNode.removeChild(Row);//删除行
}
以上所述是小编给大家分享的JavaScript实现动态添加删除表格的行，希望对大家有所帮助。