小虎博客

A-A+

js dom 高级应用,动态添加删除表格数据

2016年06月24日 编程技术 暂无评论

学习了两天的 js dom 高级操作应用，实例代码基本上都听懂了，只是自己还没有能力全部敲出来，因为 js 操作 table 的代码太多了，js 对节点操作除了 div 之外，也可以更好的操作表单，这两天学到的是 js 如何进行对 table 的操作，当然也遇到了神奇的 js 增删改查，虽然没有用到数据库，但其效果蛮给力的，本来视频的代码想要一行一行敲下来，只是脑子里太乱了，只能从网上把视频上的代码给拷贝下来，仅供自己参考使用吧，这里的代码是关于 js 动态添加与删除表格数据的，感觉有点意思，回头如果有用的话，可以直接拿来使用。

实例效果图片如下：

只要我文本框里面添加相应的信息，然后点击添加按钮，下面会自动多出一条信息和删除按钮，点击删除按钮之后就可以进行删除了，代码如下：

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script>  
  7.         window.onload = function () {  
  8.             var oTab = document.getElementById('tab1');  
  9.             var tBody = oTab.getElementsByTagName('tbody')[0];  
  10.             var oldColor = '';//定义一个颜色，可以改变回原先背景色  
  11.             //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);//某个单元格的值，复杂写法  
  12.             //alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//表格的tbody[0]固定，毕竟一个table里面只有一个tbody，row[1]第二行，cells[1]第二列  
  13.             for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {  
  14.                 oTab.tBodies[0].rows[i].onmouseover = function () {  
  15.                     oldColor = this.style.backgroundColor;//颜色=当前背景色  
  16.                     this.style.backgroundColor = 'green';  
  17.                 }  
  18.                 oTab.tBodies[0].rows[i].onmouseout = function () {  
  19.                     this.style.backgroundColor = oldColor;//将当前背景色在移出时赋给当前背景色  
  20.                 }  
  21.                 if (i % 2) {  
  22.                     oTab.tBodies[0].rows[i].style.backgroundColor = "#ccc";  
  23.                 }  
  24.                 else {  
  25.                     oTab.tBodies[0].rows[i].style.backgroundColor = "#fff";  
  26.                 }  
  27.             }  
  28.   
  29.   
  30.             var name = document.getElementById("name");  
  31.             var age = document.getElementById("age");  
  32.             var btn = document.getElementById("btn");  
  33.             var ID = oTab.tBodies[0].rows.length + 1;  
  34.             btn.onclick = function () {  
  35.   
  36.                 var oTr = document.createElement('tr');//创建一行  
  37.   
  38.                 var oTd = document.createElement('td');//创建第一列  
  39.   
  40.                  
  41.                 oTd.innerHTML = ID++;//第一列的值=该行+1  
  42.                 oTr.appendChild(oTd);//添加到行中  
  43.   
  44.                 var oTd = document.createElement('td');//创建第二列  
  45.                 oTd.innerHTML = name.value;//第二列的值为姓名  
  46.                 oTr.appendChild(oTd);  //xiaohuboke.com  
  47.   
  48.                 var oTd = document.createElement('td');//第三列  
  49.                 oTd.innerHTML = age.value;  
  50.                 oTr.appendChild(oTd);  
  51.   
  52.                 var oTd = document.createElement('td');//删除  
  53.                 oTd.innerHTML = "<a hred='javascript:;'>删除</a>";  
  54.                 oTr.appendChild(oTd);  
  55.   
  56.                 oTd.getElementsByTagName('a')[0].onclick = function () {//删除事件  
  57.                     tBody.removeChild(this.parentNode.parentNode);  
  58.                 }  
  59.   
  60.                 tBody.appendChild(oTr);//将tr加到表格中  
  61.             }  
  62.   
  63.         }  
  64.   
  65.     </script>  
  66. </head>  
  67. <body>  
  68.     姓名：  
  69.     <input id="name" type="text" />  
  70.     年龄：<input id="age" type="text" />  
  71.     <input id="btn" type="button" value="添加" />  
  72.     <table id="tab1" border="1" width="500px">  
  73.         <thead>  
  74.             <td>ID</td>  
  75.             <td>姓名</td>  
  76.             <td>年龄</td>  
  77.             <td>操作</td>  
  78.         </thead>  
  79.         <tbody>  
  80.             <tr>  
  81.                 <td>1</td>  
  82.                 <td>Blue</td>  
  83.                 <td>27</td>  
  84.             </tr>  
  85.             <tr>  
  86.                 <td>2</td>  
  87.                 <td>张三</td>  
  88.                 <td>23</td>  
  89.             </tr>  
  90.             <tr>  
  91.                 <td>3</td>  
  92.                 <td>李四</td>  
  93.                 <td>28</td>  
  94.             </tr>  
  95.             <tr>  
  96.                 <td>4</td>  
  97.                 <td>张伟</td>  
  98.                 <td>28</td>  
  99.             </tr>  
  100.         </tbody>  
  101.     </table>  
  102. </body>  
  103. </html>  
标签：

给我留言