24、DOM的高级应用1-------表格的动态删除和添加行的操作

来源：互联网发布：网络借贷备案信息披露编辑：程序博客网时间：2024/05/18 03:23

1、DOM的高级应用1-------表格的动态删除和添加行的操作

2、注意oTab.tBodies[0].rows[0].cells[1].innerHTML的使用形式

3、代码的实现

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格的高级应用</title><script>window.onload = function() {var oTab = document.getElementById('tab1');//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML);//1、在表格里面,获取表格的快捷方式//alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);//2、如果不加tBodies,会将thead里面的列，也算进来//alert(oTab.rows[0].cells[1].innerHTML);//3、动态的增加一行var oBtn = document.getElementById('btn1');var oTxt = document.getElementById("text1");var iNowId = oTab.tBodies[0].rows.length + 1;oBtn.onclick = function() {//ID那一列var oTr = document.createElement('tr');var oTd = null;oTd = document.createElement('td');oTd.innerHTML = iNowId++;oTr.appendChild(oTd);//姓名那一列oTd = document.createElement('td');oTd.innerHTML = oTxt.value;oTr.appendChild(oTd);//操作那一列oTd = document.createElement('td');//4、删除一行//4.1该删除添加按钮oTd.innerHTML = '<a href="javascript:void(0)" >删除</a>';oTr.appendChild(oTd);//4.2 添加删除事件oTd.getElementsByTagName('a')[0].onclick = function() {//调用table的removeremoveChild()方法，完成当前行的删除操作oTab.tBodies[0].removeChild(this.parentNode.parentNode);}//添加到tBodies里面oTab.tBodies[0].appendChild(oTr);}};</script></head><body><!--用于增加元素--><input id="text1" type="text" /><input id="btn1" type="button" value="添加" /><!--表格--><table id="tab1" border="1" width="400"><thead><td>ID</td><td>姓名</td><td>操作</td></thead><tbody><tr><td>1</td><td>Blue</td><td></td></tr><tr><td>2</td><td>Leo</td><td></td></tr><tr><td>3</td><td>莫莫</td><td></td></tr><tr><td>4</td><td>aaa</td><td></td></tr><tr><td>5</td><td>bbb</td><td></td></tr><tr><td>6</td><td>ccc</td><td></td></tr></tbody></table></body></html>

1 0