<html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>javascript操作table的特性</title> <script type="text/javascript"><!-- function f(){ //建立一個表格 var oTable = document.createElement("table"); oTable.setAttribute("border","1"); oTable.setAttribute("width","300px"); // var oTBody = document.createElement("tbody"); oTable.appendChild(oTBody); //建立第一行 oTBody.insertRow(0); oTBody.rows[0].insertCell(0); oTBody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); oTBody.rows[0].insertCell(1); oTBody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); //建立第二行 oTBody.insertRow(1); oTBody.rows[1].insertCell(0); oTBody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); oTBody.rows[1].insertCell(1); oTBody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); // jb51.netdocument.body.appendChild(oTable); } // --></script> </head> <body onclick="f();"> <div>hello</div> <table border="1" width="300px"> <tbody> <tr> <td>Cell 1,1</td> <td>Cell 2,1</td> </tr> <tr> <td>Cell 1,2</td> <td>Cell 2,2</td> </tr> </tbody> </table> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
可以直接點擊頁面的任何部分即可看到效果。
