| <!DOCTYPE html> <html > <head > <meta charset="UTF-8"> <title>DOM对表格的操作</title> <script> function createTable() { // 创建一张一行两列的表格 var mytable = document.createElement("table"); mytable.border = "0"; // 也可以使用setAttribute进行属性的设置 mytable.setAttribute("cellspacing", "2"); mytable.setAttribute("width", "60%"); mytable.bgColor = "black"; var myrow = document.createElement("tr"); // 创建表格的第一行 myrow.bgColor = "white"; var mycell = document.createElement("td"); // 创建表格的第一行第一列 mycell.height = "80"; mycell.appendChild(document.createTextNode("第1行第1列")); myrow.appendChild(mycell); // 创建表格的第一行第二列 var mycell = document.createElement("td"); mycell.appendChild(document.createTextNode("第1行第2列")); myrow.appendChild(mycell); // 将tr这一行的节点添加到table中 mytable.appendChild(myrow); // 将表格元素添加到body当中 document.body.appendChild(mytable); } function insertRow1() { // 利用innerHTML向表格的最后插入一行 var mytable = document.getElementById("mytable"); var newRow = "<tr bgcolor='orange'><td>第3行第1列</td>" + "<td>第3行第2列</td><td>第3行第3列</td></tr>"; mytable.innerHTML = mytable.innerHTML + newRow; } function insertRow2() { // 利用insertRow向表格的任意位置插入一行 var mytable = document.getElementById("mytable"); var newRow = mytable.insertRow(-1); var mytd1 = newRow.insertCell(-1); mytd1.innerHTML = "第3行第1列"; var mytd2 = newRow.insertCell(-1); mytd2.innerHTML = "第3行第2列"; var mytd3 = newRow.insertCell(-1); mytd3.innerHTML = "第3行第3列"; newRow.style.backgroundColor = "orange"; newRow.style.height = "40px"; } function deleteTable() { // 删除整个表格，该方法针对其它元素同样适用 var mytable = document.getElementById("mytable"); mytable.remove(); } function deleteRow() {// 删除表格中的一行，使用deleteRow专用方法 var mytable = document.getElementById("mytable"); mytable.deleteRow(0); // 参数0表示删除第一行 } // 删除表格中的一列，先获取表格的行，再指定删除该行的某一列 function deleteCol() { var mytable = document.getElementById("mytable"); var mytr = mytable.rows[1]; mytr.deleteCell(2); } function operateCell() { // 利用表格的行列索引操作单元格 var mytable = document.getElementById("mytable"); var cell = mytable.rows[1].cells[2]; // 获取到第2行第3列 cell.innerHTML = "第二行第三列"; cell.style.backgroundColor = "yellow"; } </script> </head> <body onload="tableCell()"> <table border="0" cellspacing="2" bgcolor="black" id="mytable"> <tr bgcolor="white"> <td>第1行第1列</td> <td>第1行第2列</td><td>第1行第3列</td> </tr> <tr bgcolor="white" id="mytr"> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> </table> <br/> <input type="button" value="创建表格" onclick="createTable()"> <input type="button" value="插入行一" onclick="insertRow1()"> <input type="button" value="插入行二" onclick="insertRow2()"> <input type="button" value="删除一行" onclick="deleteRow()"> <input type="button" value="删除一列" onclick="deleteCol()"> <input type="button" value="修改单元格" onclick="operateCell()"> <input type="button" value="删除表格" onclick="deleteTable()"> </body> </html> | 
