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

前端技术 2023/09/07 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实现动态添加删除表格的行，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/18111

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案