萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 原生javaScript做得動態表格

原生javaScript做得動態表格

 因為看公司好多用動態表格的,所以,我就試著用js做了動態表格,下面有個不錯的示例,感興趣的朋友可以參考下

最近看了3本o'reilly的書,我們一般稱為禽獸書(跟我一同學的名字很像大笑),然後一直想做一個列子來練練手,因為看公司好多用動態表格的,所以,我就試著用js做了動態表格,用firfox浏覽器來調試的,因為firbug插件用著比較好,本來就是想實現一個很小的功能,沒想做那麼多,就點擊按鈕能夠增加一行就行了,後來越加越多,也越來越好看了。把源碼貼出來,大家共同學習,有問題也可以指正出來,js初學者,忘大神筆下留情。    ps:不知道上面為什麼不顯示行號,好久沒用了。 注釋寫的很清楚,大家共同學習。  代碼如下: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>動態表格</title>  <style type="text/css">  body{ background-color:#9CC; text-align:center}  table{ margin:10px auto;}  tr th { border: 1px solid #096;}  td{border: 1px solid #096;}  </style>  <script type="text/javascript">  /*在函數的外部只能聲明一些變量之類的,不能用操作方法,因為沒有函數去調用執行它。*/    //在載入頁面的時候就在表格頭放入選擇框,因為是一次性的  window.onload = function(){  var tab = document.getElementById('tab');  var firsttr = document.getElementsByTagName('tr')[0];  var childtd = firsttr.childNodes;  //在第一行第一列上加入選擇框  var inp = document.createElement('input');  inp.type = 'checkbox';    //DOM Leve 2 事件注冊  catchEvent(inp,'click',function(){ //注冊函數 不同狀態進行判斷  if(inp.checked ==true){  allSelect();  }else{  cancelSelect();  }  });  //catchEvent(inp,'click',allSelect);  //catchEvent(inp,'change',cancelSelect);  childtd[0].appendChild(inp);    }    //增加一行  //var count =0;//增加一列用來 計數  function addRow(){  //count++;  var tab = document.getElementById('tab');  var firsttr = document.getElementsByTagName('tr')[0];  var childtd = firsttr.childNodes;  var tr = document.createElement('tr');  var arrtd = new Array();  var arrinp = new Array();  for(var i =0;i<childtd.length;i++){  arrtd[i] = document.createElement('td');  arrinp[i] = document.createElement('input');  if(i==0){  arrinp[i].type = 'checkbox';  arrinp[i].name = 'selectbox';  }else if(i==1){  //arrinp[i] = document.createTextNode(count);  arrinp[i] = document.createTextNode('');  }  arrtd[i].appendChild(arrinp[i]);//思考為什麼 input也要加上數組。  tr.appendChild(arrtd[i]);  }    tab.appendChild(tr);  newSort();  }  //刪除操作  function deleteRow(){  var parentTr = new Array();//先把被選中的行放在一個數組上  var box = document.getElementsByName('selectbox');  var tab = document.getElementById('tab');  for(var i = 0;i<box.length;i++){  if(box[i].checked==true){  var parent = box[i].parentNode;  parentTr[i] = parent.parentNode;//如果直接這種為放在裡面為什麼不能完全刪除??是因為反應不夠嗎?  //tab.removeChild(parentTr);  }  }  for(var i = 0;i<parentTr.length;i++){ //這樣做才能把選中的全部刪除  if(parentTr[i]){ //這邊要先判斷一下是否為空值,如果不為空才去移除,否者會報錯。  tab.removeChild(parentTr[i]);  }  }  newSort();  }    //如果執行刪除的話則,重新進行排序  function newSort(){  var text = new Array();  var child_td = new Array();  var arr_tr = document.getElementsByTagName('tr');  for(var i = 1;i<arr_tr.length;i++){  child_td[i] = arr_tr[i].childNodes[1];//獲得從第二行開始所有第二列的節點  if(child_td[i].childNodes[0]){  child_td[i].removeChild(child_td[i].childNodes[0]);  }  text[i] = document.createTextNode(i);  child_td[i].appendChild(text[i]);    }  }  //全選操作  function allSelect(){  var box = document.getElementsByName('selectbox');  for(var i= 0;i<box.length;i++){  box[i].checked = true;  }  }    //全部取消選擇  function cancelSelect(){  var box = document.getElementsByName('selectbox');  for(var i = 0;i<box.length;i++){  if(box[i].checked == true){  box[i].checked =false;  }  }  }  //事件注冊函數  function catchEvent(eventobj,event,eventHandler){  if(eventobj.addEventListener){  eventobj.addEventListener(event,eventHandler,false);  }else if(eventobj.attachEvent){  event = 'on'+event;  eventobj.attachEvent(event,eventHandler);  }  }    //catchEvent(add,'click',addRow);    </script>  </head>    <body>  <h3>動態表格</h3>  <input type="button" value="增加" id="add" onclick="addRow()" />  <input type="button" value="全部選擇" onclick="allSelect()" />  <input type="button" value="全部取消" onclick="cancelSelect()" />  <input type="button" value="刪除" id="delete" onclick="deleteRow()"/>  <table id="tab" cellpadding="5px" cellspacing="0px">  <tr><td></td><td>序號</td><td>題目一</td><td>題目二</td><td>題目三</td></tr>  </table>  </body>  </html></span>   
copyright © 萬盛學電腦網 all rights reserved