本文介绍了一个简单的HTML页面示例，该示例通过JavaScript实现了表格行的动态增加和删除功能。用户可以通过点击“新增”按钮在表格中添加一行预定义的数据，同时也可以删除已有的行。此示例适用于前端开发初学者理解DOM操作的基本概念。
<html>
<title></titile>
<body>
<a href="javascript:addTr()">新增</a>
<table id="tableId">
<tr>
<td>负责人</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr>
<td>sss</td>
<td>正常</td>
<td><a href="javascript:delete(this)">删除</a></td>
</tr>
</table>
</body>
<script>
function addTr(){
var tr = "<tr><td>aaa</td><td>正常</td><td><a href='javascript:delete(this)'>删除</a></td></tr>"
$("#tableId").append(tr);
}
function delete(obj){
var tr = this.getRowObj(obj);
if(tr != null){
tr.parentNode.removeChild(tr);
}
}
//得到行对象
function getRowObj(obj){
var i = 0;
while(obj.tagName.toLowerCase() != "tr"){
obj = obj.parentNode;
if(obj.tagName.toLowerCase() == "table")return null;
}
return obj;
}
</script>
</html>
扫一扫
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
