javascript创建table-优快云博客

本文介绍了一个使用JavaScript和DOM接口创建并填充HTML表格的方法。通过简单的脚本，可以在页面加载时动态生成包含特定文本内容的表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
   function start() {
       // get the reference for the body
       var mybody = document.getElementsByTagName("body")[0];

       // creates a <table> element and a <tbody> element
       mytable     = document.createElement("table");
       mytablebody = document.createElement("tbody");

       // creating all cells
       for(var j = 0; j < 2; j++) {
           // creates a <tr> element
           mycurrent_row = document.createElement("tr");
           for(var i = 0; i < 2; i++) {
               // creates a <td> element
               mycurrent_cell = document.createElement("td");
               // creates a text node
               currenttext = document.createTextNode("cell is row "+j+", column "+i);
               // appends the text node we created into the cell <td>
               mycurrent_cell.appendChild(currenttext);
               // appends the cell <td> into the row <tr>
               mycurrent_row.appendChild(mycurrent_cell);
           }
           // appends the row <tr> into <tbody>
           mytablebody.appendChild(mycurrent_row);
       }
       // appends <tbody> into <table>
       mytable.appendChild(mytablebody);
       // appends <table> into <body>
       mybody.appendChild(mytable);
       // sets the border attribute of mytable to 2;
       mytable.setAttribute("border", "2");
   }
</script>
</head>
<body οnlοad="start()">
</body>
</html>