首页JAVAscript 表格代码

JAVAscript 表格代码

时间: 2023-12-20 08:53:33 浏览: 61

以下是一个基本的 JavaScript 表格代码示例： ```html <!DOCTYPE html> <html> <head> <title>JavaScript Table</title> </head> <body> <h2>JavaScript Table Example</h2> <table id="myTable" border="1"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>New York</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Chicago</td> </tr> <tr> <td>Bob</td> <td>35</td> <td>Los Angeles</td> </tr> </tbody> </table> <button onclick="addRow()">Add Row</button> <script> function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "New Name"; cell2.innerHTML = "New Age"; cell3.innerHTML = "New City"; } </script> </body> </html> ``` 在此示例中，我们创建了一个带有三列和三行的表格，使用了 `<thead>` 和 `<tbody>` 元素来定义表头和表格主体。我们还添加了一个按钮，以便通过 JavaScript 动态添加新行到表格中。在 JavaScript 函数 `addRow()` 中，我们获取了表格元素的引用，并使用 `insertRow()` 方法插入了一个新行。然后，我们使用 `insertCell()` 方法在新行中插入了三个新单元格，并使用 `innerHTML` 属性将内容添加到这些单元格中。

阅读全文