Posted in Javascript onMay 22, 2014
效果图:
代码:
js动态添加表格数据_2.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title> <script type="text/javascript"> var mailArr = [ { "title": "一个c#问题", "name": "张三", "date": "2014-03-21" }, { "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" }, { "title": "一个c问题", "name": "五五", "date": "2014-03-21" }, { "title": "一个c++问题", "name": "赵六", "date": "2014-03-21" } ]; var tab = null; window.onload = function () { loadTab(); //全选 document.getElementById("selA").onclick = function() { if (document.getElementById("selA").checked == true) { seleAll(tab, true); } else { seleAll(tab, false); } }; //删除所有的选中的 document.getElementById("delSel").onclick = function() { //遍历所有的input控件即可(除了最后一个全选用的checkbox) var chks = document.getElementsByTagName('input'); for (var i = chks.length - 2; i >=0; i--) { var chk = chks[i]; if (chk.checked==true) { //选中行删除处理 var rowNow = chk.parentNode.parentNode; rowNow.parentNode.removeChild(rowNow); } else { alert("really"); } } }; }; function loadTab() { tab = document.getElementById("tb"); //把mailArr循环遍历方式以tr的方式加入表格中 for (var rowindex = 0; rowindex < mailArr.length; rowindex++) { //var tr = tab.insertRow(-1);//-1指最后一行 var tr = tab.insertRow(tab.rows.length - 1);//插入到末二行,最后一行要给全选那一行保留着 var td1 = tr.insertCell(-1); td1.innerHTML = "<input type='checkbox'/>"; var td2 = tr.insertCell(-1); td2.innerHTML = mailArr[rowindex].title; var td3 = tr.insertCell(-1); td3.innerHTML = mailArr[rowindex].name; var td4 = tr.insertCell(-1); td4.innerHTML = mailArr[rowindex].date; } } //要使全选按钮生效,就要遍历所有的表格的行 function seleAll(mailTab, isSel) { for (var i = 0; i < mailTab.rows.length; i++) { var tr = mailTab.rows[i]; tr.cells[0].childNodes[0].checked = isSel; } } </script> </head> <body> <table id="tb" border="1" style="border-collapse: collapse;"> <tr> <th>序列</th> <th>标题</th> <th>发邮人</th> <th>发件时间</th> </tr> <!-- 循环增加 --> <!-- 全选 --> <tr> <td colspan="4"> <input id="selA" type="checkbox" /><label for="selA">全选</label> <a href="#" id="delSel">删除</a></td> </tr> </table> </body> </html>
js动态添加表格数据使用insertRow和insertCell实现
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@