js實現表格資訊的刪除和添加

標籤：子節點   type   text   點擊事件   nts   charset   學生   asc   seo   

<! DOCTYPE  html> < html >   < head >    < title > new document </ title >     < meta  http-equiv="Content-Type" content="text/html; charset=utf-8"/>      < script  type="text/javascript">        window.onload = function(){      var tr = document.getElementsByTagName(‘tr‘);      for(var i=0;i< tr.length ;i++){         changeColor(tr[i]);      }    }      function changeColor(obj){          obj.onmouseover = function(){              obj.style.backgroundColor="#f2f2f2";          }            obj.onmouseout = function(){              obj.style.backgroundColor = "#fff";          }      }               // 編寫一個函數，供添加按鈕調用，動態在表格的最後一行添加子節點；      var num = 2;      function add(){          num++;          var tr  = document.createElement(‘tr‘);          var td1 = document.createElement(‘td‘);          var td2 = document.createElement(‘td‘);          var td3 = document.createElement(‘td‘);          td1.innerHTML = ‘xh00‘+num;          td2.innerHTML = ‘第‘+num+"位學生";          td3.innerHTML = "<a href=‘javascript:;‘ onclick=‘del(this)‘>刪除</ a >";          var table = document.getElementById(‘table‘);          table.appendChild(tr);          tr.appendChild(td1);          tr.appendChild(td2);          tr.appendChild(td3);          var tr = document.getElementsByTagName(‘tr‘);          for(var i=0;i< tr.length ;i++)          {           changeColor(tr[i]);          }       }                            // 建立刪除函數       function del(x){       //此處不能寫成remove(x),js中remove()方法用於從下拉式清單刪除選項。           var tr = x.parentNode.parentNode;           tr.parentNode.removeChild(tr);       }    </script>   </ head >   < body >    < center >         < table  border="1" width="50%" id="table" style="text-align:center">         < tr >          < th >學號</ th >          < th >姓名</ th >          < th >操作</ th >         </ tr >          < tr >          < td >xh001</ td >          < td >王小明</ td >          < td >< a  href="javascript:;" onclick="del(this)">刪除</ a ></ td >    <!--在刪除按鈕上添加點擊事件  -->         </ tr >         < tr >          < td >xh002</ td >          < td >劉小芳</ td >          < td >< a  href="javascript:;" onclick="del(this)">刪除</ a ></ td >    <!--在刪除按鈕上添加點擊事件  -->         </ tr >          </ table >< br >         < input  type="button" value="添加一行" onclick="add()" />       <!--在添加按鈕上添加點擊事件  -->     </ center >   </ body > </ html >

js實現表格資訊的刪除和添加