首页html js创建表格

html js创建表格

时间: 2023-07-18 15:44:04 浏览: 123

可以使用HTML和JavaScript来创建表格，以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>创建表格</title> </head> <body> <button onclick="createTable()">创建表格</button> <script> function createTable() { // 获取表格容器 var tableContainer = document.getElementById("tableContainer"); // 创建表格元素 var table = document.createElement("table"); // 创建表头 var thead = document.createElement("thead"); var tr = document.createElement("tr"); var th1 = document.createElement("th"); var th2 = document.createElement("th"); th1.innerHTML = "姓名"; th2.innerHTML = "年龄"; tr.appendChild(th1); tr.appendChild(th2); thead.appendChild(tr); // 创建表格内容 var tbody = document.createElement("tbody"); for (var i = 1; i <= 5; i++) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); td1.innerHTML = "用户" + i; td2.innerHTML = i + 20; tr.appendChild(td1); tr.appendChild(td2); tbody.appendChild(tr); } // 将表头和表格内容添加到表格中 table.appendChild(thead); table.appendChild(tbody); // 将表格添加到容器中 tableContainer.appendChild(table); } </script> <div id="tableContainer"></div> </body> </html> ``` 这个示例代码中，我们使用了HTML的table元素来创建表格，使用JavaScript动态地创建表头和表格内容，并将它们添加到表格中。最后，将整个表格添加到页面中的一个容器中。

阅读全文