attachEvent() / addEventListener() 对象添加触
DOM Tree的删除
Oct
11
DHTML示例，动态添加/删除元素 
效果为：点击add按钮在表格中增加一行；点击某行的del连接删除该行。
转载请注明出自 ，如是转载文则注明原出处，谢谢:)
RSS订阅地址: https://www.felix021.com/blog/feed.php 。
<html>
<head><title>test</title></head>
<body>
<script language="javascript">
var cnt = 0;
function $(id){return document.getElementById(id);}
function del(id){ $('ooxx').removeChild($('row'+id)); }
function add(){
var tbl = $('ooxx');
var row = document.createElement('TR');
row.id = 'row' + cnt;
var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var text = document.createTextNode(cnt);
cell1.appendChild(text);
cell2.innerHTML = '<a href="javascript:del('+cnt+');">del</a>';
row.appendChild(cell1);
row.appendChild(cell2);
tbl.appendChild(row);
cnt++;
}
</script>
<input type="button" value="add" onclick="add()"/>
<table border="1">
<tbody id="ooxx">
<tr><td>id</td><td>op</td></tr>
</tbody>
</table>
</body>
</html>
<head><title>test</title></head>
<body>
<script language="javascript">
var cnt = 0;
function $(id){return document.getElementById(id);}
function del(id){ $('ooxx').removeChild($('row'+id)); }
function add(){
var tbl = $('ooxx');
var row = document.createElement('TR');
row.id = 'row' + cnt;
var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var text = document.createTextNode(cnt);
cell1.appendChild(text);
cell2.innerHTML = '<a href="javascript:del('+cnt+');">del</a>';
row.appendChild(cell1);
row.appendChild(cell2);
tbl.appendChild(row);
cnt++;
}
</script>
<input type="button" value="add" onclick="add()"/>
<table border="1">
<tbody id="ooxx">
<tr><td>id</td><td>op</td></tr>
</tbody>
</table>
</body>
</html>
欢迎扫码关注：
转载请注明出自 ，如是转载文则注明原出处，谢谢:)
RSS订阅地址: https://www.felix021.com/blog/feed.php 。
