动态插入、添加删除表格行的JS代码

最新推荐文章于 2018-12-11 08:51:46 发布

商商-77

最新推荐文章于 2018-12-11 08:51:46 发布

阅读量201

点赞数

文章标签： javascript ViewUI

<html>
<head>
<title>Table对象的方法</title>
<scriptlanguage="JavaScript">
varintRowIndex=0;
functioninsertRow(tbIndex){
varobjRow=myTable.insertRow(tbIndex);
varobjCel=objRow.insertCell(0);
objCel.innerText=document.myForm.myCell1.value;
varobjCel=objRow.insertCell(1);
objCel.innerText=document.myForm.myCell2.value;
objRow.attachEvent("onclick",getIndex);
objRow.style.background="pink";
}
functiondeleteRow(tbIndex){
myTable.deleteRow(tbIndex);
}
functiongetIndex(){
intRowIndex=event.srcElement.parentElement.rowIndex;
pos.innerText=intRowIndex;
}
</script>
</head>
<bodyonload="pos.innerText=intRowIndex;">
<h2>Table对象的方法</h2>
<hr>
当前位置:<spanid="pos"></span>
<tableid="myTable"border=1>
<tronclick="getIndex()">
<td>HTML</td>
<td>CSS</td>
</tr>
<tronclick="getIndex()">
<td>JavaScript</td>
<td>VBScript</td>
</tr>
</table>
<formname="myForm">
第一栏:<inputtype="text"name="myCell1"value="CGI"><br>
第二栏:<inputtype="text"name="myCell2"value="ASP"><br>
<inputtype="button"onclick="insertRow(intRowIndex)"value="插入行">
<inputtype="button"onclick="deleteRow(intRowIndex)"value="删除行">
<inputtype="button"onclick="insertRow(myTable.rows.length);"value="添加行">
</form>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态插入、添加删除表格行的JS代码

&lt;html&gt;&lt;head&gt;&lt;title&gt;Table对象的方法&lt;/title&gt;&lt;scriptlanguage="JavaScript"&gt;varintRowIndex=0;functioninsertRow(tbIndex){varobjRow=myTable.insertRow(tbIndex);varobjCel=objRo...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。