方式一：
var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", age: 13 }, { id: 3, name: "three", age: 12 }, { id: 4, name: "fore", age: 13 }, ]; //原始的创建表格方式 window.onload=function() { var tableAdd = document.createElement("table") tableAdd.id = "table1"; tableAdd.className = "table1"; document.getElementById("divTest").appendChild(tableAdd); for(var i=0;i<data.length;i++) { var rowData = data[i]; var newRow = document.createElement("tr"); tableAdd.appendChild(newRow); var newCol0 = document.createElement("td"); newRow.appendChild(newCol0); var checkBox = document.createElement("input"); checkBox.type = "checkbox"; newCol0.appendChild(checkBox); var newCol = document.createElement("td"); //双标签有inner属性，表示可以设置内容 newCol.innerHTML = rowData.id; newRow.appendChild(newCol); var newCol2 = document.createElement("td"); //双标签有inner属性，表示可以设置内容 newCol2.innerHTML = rowData.name; newRow.appendChild(newCol2); var newCol3 = document.createElement("td"); //双标签有inner属性，表示可以设置内容 newCol3.innerHTML = rowData.age; newRow.appendChild(newCol3); } var lastRow = document.createElement("tr"); tableAdd.appendChild(lastRow); var lasttd1 = document.createElement("td"); lasttd1.colSpan = 4; lasttd1.innerHTML = "<input type='checkbox'/> 全选 <a href='#'>删除</a>"; lastRow.appendChild(lasttd1); } </script> </head> <body> <div id="divTest" style="border:1px solid #ffd800; 1000px;height:1200px;"> </div> </body> </html>
效果图如下：
方式二：
<style type="text/css"> .table1 { border:1px solid #00ff21; 200px; height:200px; margin:10px auto; /*margin 设置 auto可以使居中显示*/ border-collapse:collapse; /*将td之间的空隙合并*/ } .table1 td { border:1px solid #00ff21; padding:4px; } .chk{ } </style> <script type="text/javascript" language="JavaScript"> //只有表格才有的创建方式 window.onload = function () { var tableAdd = document.createElement("table") tableAdd.id = "table1"; tableAdd.className = "table1"; document.getElementById("divTest").appendChild(tableAdd); for (var i = 0; i < data.length; i++) { var rowData = data[i]; var newRow = tableAdd.insertRow(-1);//-1表示在表格最后追加一行，参数代表要插入行的位置 newRow.insertCell(-1).innerHTML = "<input type='checkbox' class='chk'/>"; var newCol = newRow.insertCell(-1);//单元格已经添加导航中，并且返回单元格引用 //innerHTML是设置双标签的内容字符串，并且会自动解析HTML newCol.innerHTML = rowData.id; newRow.insertCell(-1).innerHTML = rowData.name; newRow.insertCell(-1).innerHTML = rowData.age; } var lastRow = tableAdd.insertRow(-1); var lastCol = lastRow.insertCell(-1); lastCol.colSpan = 4; lastCol.innerHTML = "<input type='checkbox' id='checkAll'/> 全选 <a href='javascript:del()'>删除</a>"; document.getElementById("checkAll").onclick = allCheck; } /*实现全选*/ function allCheck() { var res = document.getElementById("checkAll").checked; var chks = document.getElementsByClassName("chk"); for(var i=0;i<chks.length;i++) { //为所有复选框的选中状态赋值：把全选复选框的选中状态设置给他们 chks[i].checked = res; } } /*实现删除*/ function del() { var chks = document.getElementsByClassName("chk"); for(var i=0;i<chks.length;i++) { var chk = chks[i]; if(chk.checked) { //获取复选框所在的行对象 var trObj = chk.parentNode.parentElement; //通过行对象的父元素 删除行对象 因为删除只能通过父元素来删 trObj.parentElement.removeChild(trObj); } } } var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", age: 13 }, { id: 3, name: "three", age: 12 }, { id: 4, name: "fore", age: 13 }, ];
效果图如下：
