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

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

时间: 2023-10-12 14:15:48 浏览: 76

好的，可以使用JavaScript来实现将数组写入HTML的table中展现数据。以下是一个简单的例子： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Array to Table</title> </head> <body> <h1>Array to Table</h1> <table id="myTable"> <thead> <tr> <th>序号</th> <th>名称</th> <th>数量</th> </tr> </thead> <tbody> </tbody> </table> </body> </html> ``` JavaScript代码： ```javascript // 定义数组 var items = [ { name: "苹果", qty: 10 }, { name: "香蕉", qty: 20 }, { name: "橙子", qty: 15 } ]; // 获取table元素 var table = document.getElementById("myTable"); // 遍历数组，生成table行 for (var i = 0; i < items.length; i++) { // 创建行 var row = table.insertRow(-1); // 创建单元格 var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); // 填充单元格内容 cell1.innerHTML = i+1; cell2.innerHTML = items[i].name; cell3.innerHTML = items[i].qty; } ``` 这段JavaScript代码将数组中的数据逐一遍历，生成HTML的`<tr>`和`<td>`元素，并将数据填充到单元格中，最终呈现在HTML的table中。希望这个例子可以帮助你实现数组数据展示在HTML的table中。

阅读全文