首页在HTML中用js做一张表格

在HTML中用js做一张表格

时间: 2024-03-02 19:52:27 浏览: 98

可以使用 JavaScript 动态创建表格，示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <script> // 创建表格 var table = document.createElement("table"); table.border = "1"; // 创建表头 var tr = document.createElement("tr"); var th1 = document.createElement("th"); th1.innerHTML = "姓名"; var th2 = document.createElement("th"); th2.innerHTML = "年龄"; tr.appendChild(th1); tr.appendChild(th2); table.appendChild(tr); // 创建表格内容 var data = [ { name: "张三", age: 18 }, { name: "李四", age: 20 }, { name: "王五", age: 22 } ]; for (var i = 0; i < data.length; i++) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = data[i].name; var td2 = document.createElement("td"); td2.innerHTML = data[i].age; tr.appendChild(td1); tr.appendChild(td2); table.appendChild(tr); } // 把表格添加到页面 document.body.appendChild(table); </script> </body> </html> ``` 这段代码创建了一个有表头和表格内容的表格，并把它添加到页面中。可以根据需要修改表格的样式和数据。

阅读全文