学习了两天的 js dom 高级操作应用，实例代码基本上都听懂了，只是自己还没有能力全部敲出来，因为 js 操作 table 的代码太多了，js 对节点操作除了 div 之外，也可以更好的操作表单，这两天学到的是 js 如何进行对 table 的操作，当然也遇到了神奇的 js 增删改查，虽然没有用到数据库，但其效果蛮给力的，本来视频的代码想要一行一行敲下来，只是脑子里太乱了，只能从网上把视频上的代码给拷贝下来，仅供自己参考使用吧，这里的代码是关于 js 动态添加与删除表格数据的，感觉有点意思，回头如果有用的话，可以直接拿来使用。
实例效果图片如下：
只要我文本框里面添加相应的信息，然后点击添加按钮，下面会自动多出一条信息和删除按钮，点击删除按钮之后就可以进行删除了，代码如下：
| 代码如下 | 复制代码 |
| <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script> window.onload = function () { var oTab = document.getElementById('tab1'); var tBody = oTab.getElementsByTagName('tbody')[0]; var oldColor = '';//定义一个颜色，可以改变回原先背景色 //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);//某个单元格的值，复杂写法 //alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//表格的tbody[0]固定，毕竟一个table里面只有一个tbody，row[1]第二行，cells[1]第二列 for (var i = 0; i < oTab.tBodies[0].rows.length; i++) { oTab.tBodies[0].rows[i].onmouseover = function () { oldColor = this.style.backgroundColor;//颜色=当前背景色 this.style.backgroundColor = 'green'; } oTab.tBodies[0].rows[i].onmouseout = function () { this.style.backgroundColor = oldColor;//将当前背景色在移出时赋给当前背景色 } if (i % 2) { oTab.tBodies[0].rows[i].style.backgroundColor = "#ccc"; } else { oTab.tBodies[0].rows[i].style.backgroundColor = "#fff"; } } var name = document.getElementById("name"); var age = document.getElementById("age"); var btn = document.getElementById("btn"); var ID = oTab.tBodies[0].rows.length + 1; btn.onclick = function () { var oTr = document.createElement('tr');//创建一行 var oTd = document.createElement('td');//创建第一列 oTd.innerHTML = ID++;//第一列的值=该行+1 oTr.appendChild(oTd);//添加到行中 var oTd = document.createElement('td');//创建第二列 oTd.innerHTML = name.value;//第二列的值为姓名 oTr.appendChild(oTd); //xiariboke.com var oTd = document.createElement('td');//第三列 oTd.innerHTML = age.value; oTr.appendChild(oTd); var oTd = document.createElement('td');//删除 oTd.innerHTML = "<a hred='javascript:;'>删除</a>"; oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick = function () {//删除事件 tBody.removeChild(this.parentNode.parentNode); } tBody.appendChild(oTr);//将tr加到表格中 } } </script> </head> <body> 姓名： <input id="name" type="text" /> 年龄：<input id="age" type="text" /> <input id="btn" type="button" value="添加" /> <table id="tab1" border="1" width="500px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>2</td> <td>张三</td> <td>23</td> </tr> <tr> <td>3</td> <td>李四</td> <td>28</td> </tr> <tr> <td>4</td> <td>张伟</td> <td>28</td> </tr> </tbody> </table> </body> </html> |
|
时间： 2024-09-20 16:53:03