我想从数组中制作 HTML 表格

Posted 2023-05-08

技术标签:

【中文标题】我想从数组中制作 HTML 表格【英文标题】：I want to make HTML table from array 【发布时间】：2021-12-14 08:18:42 【问题描述】：

任务是用来自数组 id、name 和 price 的数据填充表格。我做错了什么？

var data = "id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270];
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(data, function(index, value) 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            );

            table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

【问题讨论】：

这能回答你的问题吗？ How to populate an HTML table from javascript Object? 【参考方案1】：

它不起作用，因为您的输入数据不是作为对象数组组织的，而是作为数组对象组织的（OOP 较少）。

由于我更喜欢将对象数组作为数据结构，我建议（暂时）转换为该结构，然后您的循环将按预期工作：

var data = "id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270];
var array = data.id.map((id, i) => ( id, name: data.name[i], price: data.price[i] ));
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(array, function(index, value) 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            );

            table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

作为一个无关的评论，我建议在构建表格的过程中更多地使用 jQuery。这也将避免当您的数据中包含 < 或 & 字符后紧跟字母时可能遇到的问题，因为这将被解释为 HTML：

var data = "id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270];
var array = data.id.map((id, i) => ( id, name: data.name[i], price: data.price[i] ));
var i = 0;

$('#tableContainer').empty().append($("<table>").addClass("mainTable").append(
    $("<tr>").append(
        $("<th>").text("id"),
        $("<th>").text("name"),
        $("<th>").text("price")
    ),
    ...array.map(value =>
        $("<tr>").append(
            $("<td>").text(value.id),
            $("<td>").append($("<img>",  src: value.name )),
            $("<td>").text(value.price)
        )
    )
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

【讨论】：

非常感谢您的帮助和正确的评论。【参考方案2】：

您的数据结构不可迭代。因此，您需要将数据结构更改为列表[id: '1111', name: 'name1', price: 1111]，或者您需要假设所有列表（id、name、price）的长度相同，并使用该长度进行迭代。

由于其他答案详细说明了如何使用可迭代数据结构，我将处理另一种方法，您的数据已经采用这种格式并且不会改变。

对于此方法，查找一个属性（id、名称或价格）的长度，并使用索引遍历所有属性。这是一个例子。

var data = "id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270];
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
data.id.forEach((value, index) => 
    table += ('<tr>');
    table += ('<td>' + data.id[index] + '</td>');
    table += ('<td><img src="' + data.name[index] + '"></td>');
    table += ('<td>' + data.price[index] + '</td>');
    table += ('</tr>');
);
table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

【讨论】：

【参考方案3】：

您正在处理数据，就好像它被构造为单个数组一样，如下所示：

data = [
  
    id: 1986,
    name: "name1",
    price: 1148
  
]

但是，您的数据包含三个数组，而不是一个：

data = 
  id: [...],
  name: [...],
  price: [...],

如果数据的结构与第一个示例类似，则 value 将包含每个数组元素的对象，并具有可用的属性 id、name 和 price。

一种选择是将第一个数据结构转换为第二个：

var data = "id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270];
var mappedData = data.id.map((id, index) => (
    id: id,
  name: data.name[index],
  price: data.price[index]
))

然后，使用 mappedData 并像之前一样访问属性，如下所示：

var data = "id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270];
var mappedData = data.id.map((id, index) => (
    id: id,
  name: data.name[index],
  price: data.price[index]
))
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(dataMapped, function(index, value) 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            );

            table += '</table>'; 
$('#tableContainer').html(table);

【讨论】：

这几乎值得一票，你就快到了，只要完成你的答案并提供更新和工作的代码，你就很好了更新了，虽然有点晚了:) 不，那很好，那就投个赞成票吧！【参考方案4】：

var data = "id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270];
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(data["id"], function(index, value) 

                table += ('<tr>');
                table += ('<td>' + value + '</td>');
                table += ('<td><img src="' + data["name"][index] + '"></td>');
                table += ('<td>' + data["price"][index] + '</td>');
                table += ('</tr>');
            );

            table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

【讨论】：

你改变了什么？你是如何解决问题的？请不要只转储代码作为答案，这被认为质量差【参考方案5】：

有一些方法可以按照您的定义迭代数据，但我认为最好以适当的方式将其定义为实体数组（$.each 是迭代数组）：

[
 
   "id": "1986",
   "name": "name1",
   "price": 1148
 ,
 
   "id": "1990",
   "name": "name2",
   "price": 1396
 ,
];

【讨论】：

这是一个很好的提示，但不是正确的答案。它并不能真正解决问题。其他答案说同样的事情和提供工作代码。【参考方案6】：

您可以在不更改输入的情况下执行此操作。

var data = 
  "id": ["1986", "1990", "1989", "1985", "1988", "1987"],
  "name": ["name1", "name2 ", "name3 ", "name4", "латунь матовая ", "name5"],
  "price": [1148, 1396, 2775, 1270, 1396, 1270]
;


document.getElementById("tableContainer").innerHTML = data.id
  .map((id,i) => `<tr><td>$id</td>
    <td><img src="$data.name[i]"></td>
    <td>$data.price[i]</td></tr>`).join("")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table class="mainTable">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody id="tableContainer"></tbody>
  </table>
</div>

我还建议您将输入更改为对象数组。它使解析更简单

var data = [
   "id": "1986", "name": "name1", "price": 1148,
   "id":"1990",  "name": "name2", "price": 1396,
   "id":"1989",  "name": "name3", "price": 2775,
   "id":"1985",  "name": "name4", "price": 1270,
   "id":"1988",  "name": "латунь матовая ", "price": 1396,
   "id":"1987",  "name": "name5", "price": 1270
];


document.getElementById("tableContainer").innerHTML = data
  .map((id,name,price) => `<tr><td>$id</td>
    <td><img src="$name"></td>
    <td>$price</td></tr>`).join("")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table class="mainTable">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody id="tableContainer"></tbody>
  </table>
</div>

【讨论】：

以上是关于我想从数组中制作 HTML 表格的主要内容，如果未能解决你的问题，请参考以下文章

我想在 html 中加载一个 json 脚本（本地），用作表格

如何从 HTML 表格中删除特定单元格？

php html 在一个电视仪表板中显示大型动态表格数据

使用python和BeautifulSoup从html中提取表格内容

以角度形式将输入创建为数组

对齐结构数组以制作表格