首页数组写入table html,把数组里的数据在html table 里展现出来

数组写入table html,把数组里的数据在html table 里展现出来

时间: 2023-10-12 20:27:05 浏览: 101

可以使用JavaScript将数组中的数据动态地写入HTML表格中。以下是一种实现方式： ```html <!DOCTYPE html> <html> <head> <title>Array to Table</title> </head> <body> <table id="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> </tbody> </table> <script> var data = [ [1, "John", 20], [2, "Jane", 25], [3, "Bob", 30] ]; var table = document.getElementById("myTable"); var tbody = table.getElementsByTagName("tbody")[0]; for (var i = 0; i < data.length; i++) { var row = document.createElement("tr"); for (var j = 0; j < data[i].length; j++) { var cell = document.createElement("td"); cell.appendChild(document.createTextNode(data[i][j])); row.appendChild(cell); } tbody.appendChild(row); } </script> </body> </html> ``` 在上面的代码中，我们先定义了一个二维数组data，包含了三个元素，每个元素都是一个包含三个值的数组，表示一个人的ID、姓名和年龄。然后，我们通过JavaScript动态地将数据写入HTML表格中。具体的实现方式是，首先获取到表格元素和tbody元素，然后使用for循环遍历数组中的每个元素，创建一个tr元素，然后再在这个tr元素内部创建三个td元素，每个td元素都包含一个文本节点，表示数据的值。最后将这个tr元素添加到tbody元素中即可。

阅读全文