萬盛學電腦網 >> 腳本專題 >> 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>- 上一頁:jquery改變tr背景色的代碼
- 下一頁:JS字符串截取函數實例
javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved