效果圖: 程式碼: js動態新增表格資料_2.html 複製程式碼複製程式碼 複製程式碼複製程式碼複製程式碼 代碼如下: js動態新增表格資料_2 使用insertRow和insertCell方法實作 <BR><BR>var mailArr = [ <BR>{ "title": "一個c#問題", "name": "張三", "date": "2014-03-21" }, <BR>{ "title": "一個javascript問題", "name": "李四", "date": "2014-03- 21" }, <BR>{ "title": "一個c問題", "name": "五五", "date": "2014-03-21" }, <br>{ "title": "一個c 問題", "name": "趙六", "date": "2014-03-21" } <br>]; <br>var tab = null; <br>window.onload = function () { <BR>loadTab(); <BR>//全選<BR>document.getElementById("selA").onclick = function() { <BR>if (document.getElementById("selA").checked == true) { <BR>seleAll(tab, true); <BR>} else { <BR>seleAll(tab, false); <BR>} <BR>}; <BR>//刪除所有的選取的<br>document .getElementById("delSel").onclick = function() { <br>//遍歷所有的input控制項即可(除了最後一個全選的checkbox) <br><br>var chks = document.getElementsByTagName('input '); <BR><BR>for (var i = chks.length - 2; i >=0; i--) { <BR>var chk = chks[i]; <BR>if (chk.checked= =true) { <br>//選取行刪除處理<br>var rowNow = chk.parentNode.parentNode; <BR>rowNow.parentNode.removeChild(rowNow); <BR>} else { <BR>alert("really "); <BR>} <BR>} <BR>}; <BR><BR>}; <BR><BR>function loadTab() { <BR>tab = document.getElementById("tb"); 🎜>//把mailArr循環遍歷方式以tr的方式加入表格中<br>for (var rowindex = 0; rowindex < mailArr.length; rowindex ) { <br>//var tr = tab.insertRow(-1) ;//-1指最後一行<BR><BR>var tr = tab.insertRow(tab.rows.length - 1);//插入到末二行，最後一行要給全選那一行保留<BR>var td1 = tr.insertCell(-1); <BR>td1.innerHTML = "<input type='checkbox'/>"; <BR>var td2 = tr.insertCell(-1); <BR>td2. innerHTML = mailArr[rowindex].title; <br>var td3 = tr.insertCell(-1); <br>td3.innerHTML = mailArr[rowindex].name; <BR>var td4 = tr.insertCell(-1) ; <BR>td4.innerHTML = mailArr[rowindex].date; <BR>} <BR>} <BR>//要讓全選按鈕生效，就要遍歷所有的表格的行<BR><BR>function seleAll(mailTab, isSel) { <BR>for (var i = 0; i < mailTab.rows.length; i ) { <BR>var tr = mailTab.rows[i]; <br>tr.cells[0] .childNodes[0].checked = isSel; <br>} <BR>} <BR> 序列 標題 發郵人 寄件時間 全選 刪除 body>
