利用js动态添加删除table行的示例代码

网络编程 2026/4/30 佚名

3 2 1

如下所示：
复制代码代码如下:
//动态添加行
function addRow(){
   var table = document.getElementById("tableID");
   var newRow = table.insertRow(); //创建新行
   var newCell1 = newRow.insertCell(); //创建新单元格
   newCell.innerHTML = ""； //单元格内的内容
   newCell.setAttribute("align","center"); //设置位置
}

//动态删除行
function deleteRow(){
   var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById("tableID");
   styles.deleteRow(rowIndex);
}

<html>
<head>
<title></title>
</head>
<body>
<table id="testTbl" border=1>
<tr>
<td>
产品名称
</td>
<td>
产品数量
</td>
<td>
产品单价
</td>
</tr>
<tr>
<td>
<select name="a">
   <option value="电子">电子</option>
   <option value="电器">电器</option>
</select></td>
<td>
    <input type="text" name="b">
     </td>
<td>
    <input type="text" name="c">
     </td>
</td>
</table>
<input type="button" name="Submit2" value="添加" onclick="addRow()">
<script>
function addRow(){
//添加行

var newTr = testTbl.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性

newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;
newTd1.innerText = document.all("b").value;
newTd2.innerText = document.all("c").value;
newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';
}
function del(o)
{
var t=document.getElementById('testTbl');
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>

js,table

标签：

js,table

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“利用js动态添加删除table行的示例代码”

利用js动态添加删除table行的示例代码

暂无“利用js动态添加删除table行的示例代码”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2026年04月30日

利用js动态添加删除table行的示例代码

js,table

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

js判断undefined类型,undefined,null, 的区别详细解析

评论“利用js动态添加删除table行的示例代码”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接