如何使用 jquery 创建带有 json 对象的动态表答案

【问题标题】：How to Create dynamic table with json object using jquery如何使用 jquery 创建带有 json 对象的动态表
【发布时间】：2020-11-12 05:59:08
【问题描述】：

我有下面这样的 json。我必须用 json 键生成动态 th。并生成 tr 和 td 及其值。如何实现这一点。

let jsonObj= {
       "No of cells":[
          "65",
          "65",
       ],
       "Current density":{
          "Unit":"A/cm2",
          "Values":[
             "0.2",
             "0.4",
          ]
       }
       
    }

我需要这样的桌子

<table>
<th>No of cells</th>
<th>Current density</th>
<tr>
<td>65</td>
<td>0.2</td>
</tr>
<tr>
<td>65</td>
<td>0.4</td>
</tr>
</table>

我试过这样：

var idx =0;
for(let key in jsonObj){
console.log(key)
// for(let key in jsonObj){
    var row = "<tr>";
  row += "<td>" + jsonObj[key] + "</td>";
  row += "<td>" + jsonObj[key][idx] + "</td>";
  row += "<td>" + jsonObj[key][idx] + "</td>";
  row += "</tr>";
idx++;
$("#data").append(row);

// }

}

但这不起作用。请帮助我

【问题讨论】：

标签： javascript html jquery arrays

【解决方案1】：

假设 JSON Object 中的两个 Key 具有相同数量的值。您可以使用以下解决方案来完成您的任务。

let jsonObj = {
  "No of cells": [
    "65",
    "65",
  ],
  "Current density": {
    "Unit": "A/cm2",
    "Values": [
      "0.2",
      "0.4",
    ]
  }

}
var row = "";
for (let key in jsonObj){
  row += `<th>${key}</th>`;
}

$("#data").append(row);

row = "";

for (let idx in jsonObj["No of cells"]) {
  var row = "<tr>";
  row += "<td>" + jsonObj["No of cells"][idx] + "</td>";
  row += "<td>" + jsonObj["Current density"]["Values"][idx] + "</td>";
  row += "</tr>";
  
  $("#data").append(row);
}

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

</table>

【讨论】：

还需要动态。有可能吗？