如何遍历对象数组并将其渲染为HTML表格？

看起来你现在的代码把records数组直接当成一整个字符串塞进单元格里了，但你想要的是每个记录单独占一行，同时type列对应显示相同的类型值对吧？先看看你期望的效果：

原代码的问题 #

你原来的逻辑在遍历对象属性时，没有区分普通字符串（比如type）和数组（比如records），直接把数组转成字符串输出了，所以才会出现一整串记录挤在一个单元格的情况。

修改后的代码 #

我帮你调整了逻辑，现在会把records里的每个元素都拆成单独的行，同时type列重复对应的值：

HTML部分（和你原来的一致）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<body>
  <h1 id="header"></h1>
  <table id="table1">
    <thead></thead>
    <tbody></tbody>
  </table>
</body>

JavaScript部分

const data = [{
  type: "NS",
  records: [
    "d.u10.twtrdns.net",
    "a.r10.twtrdns.net",
    "a.u10.twtrdns.net",
    "b.r10.twtrdns.net",
    "b.u10.twtrdns.net",
    "c.r10.twtrdns.net",
    "c.u10.twtrdns.net",
    "d.r10.twtrdns.net",
  ],
}, ]

$(function() {
  const thead = $("#table1 thead")
  const tbody = $("#table1 tbody")
  let tr = $("<tr />")

  // 生成表头，这部分逻辑没问题
  $.each(Object.keys(data[0]), function(_, key) {
    tr.append("<th>" + key + "</th>")
  })
  tr.appendTo(thead)

  // 处理表格主体：遍历每个数据对象
  $.each(data, function(_, obj) {
    // 遍历records数组里的每一个元素，生成单独的行
    $.each(obj.records, function(_, record) {
      const tr = $("<tr />")
      // 先添加type列的内容
      tr.append(`<td>${obj.type}</td>`)
      // 再添加当前record的内容
      tr.append(`<td>${record}</td>`)
      tr.appendTo(tbody)
    })
  })
})

逻辑说明 #

1. 表头部分的代码和你原来的一样，正常生成type和records两个表头。
2. 表格主体部分，我们不再直接遍历对象的所有属性，而是专门针对records数组做循环：
   • 每遍历到一个record元素，就创建一个新的<tr>
   • 先把obj.type（也就是"NS"）塞进第一个<td>
   • 再把当前record元素塞进第二个<td>
   • 最后把这一行添加到tbody里

这样运行后，就会生成你想要的那种每行一个记录、type列统一显示的表格啦～

备注：内容来源于stack exchange，提问作者Robi Pahmi