使用列表 json 数据创建表 html 并添加过滤器选择下拉列表答案

【问题标题】：create table html with list json data and add filter select dropdown使用列表 json 数据创建表 html 并添加过滤器选择下拉列表
【发布时间】：2021-07-16 13:54:14
【问题描述】：

我有想要转换成 html 表的 json 数据列表，然后使用 select 选项创建一个过滤器，它将沿轴动态显示数据有人知道我应该怎么做吗？

var data = [
  '[{"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2}]',
  '[{"axe":"B","ville":"BIRMANIE","Poids":50,"PU":300,"SMPY":-33,"MoM":55}]',
  '[{"axe":"C","ville":"CROATIE","Poids":7,"PU":500,"SMPY":20,"MoM":35]',
  '[{"axe":"D","ville":"DANEMARK","Poids":78,"PU":600,"SMPY":156,"MoM":-49}]'
]

【问题讨论】：

尝试先用数据建一个表。如果您遇到问题，请尝试寻找解决方案。
我知道如何创建表格，但问题在于创建选择标签和显示
你需要照顾分页吗？如果是这样，我认为您应该寻找一个库，例如 Datatables(Jquery)。如果您不需要分页，我会说您可以为选择标签创建一个更改事件，每当它更改时，您清除表格并再次附加新数据。

标签： javascript html json

【解决方案1】：

是的，您可以使用 json 值创建一个 html 表购买您的 json 值看起来像它已损坏如果你可以如下替换它

var data  = [
  {"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2},
  {"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2},
  {"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2}
]

应用我的 2 功能后，您应该在容器 div 中获得一个 html 表

function addHeaders(table, keys) {
  var row = table.insertRow();
  for( var i = 0; i < keys.length; i++ ) {
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(keys[i]));
  }
}

var table = document.createElement('table');
for( var i = 0; i < data.length; i++ ) {

  var child = data[i];
  if(i === 0 ) {
    addHeaders(table, Object.keys(child));
  }
  var row = table.insertRow();
  Object.keys(child).forEach(function(k) {
    console.log(k);
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(child[k]));
  })
}

document.getElementById('container').appendChild(table);

html文件

<div id="container"></div>

https://jsfiddle.net/9azh8e0q/演示

【讨论】：

对于选择选项？我不想显示轴列，但我想用它来创建一个下拉选择标签