效果图: 代码: 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"); <BR>//把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> 序列 标题 发邮人 发件时间 全选 删除
