如何通过循环对象生成 HTML 表格？ [复制]答案

【问题标题】：How to generate HTML table by looping through object? [duplicate]如何通过循环对象生成 HTML 表格？ [复制]
【发布时间】：2019-04-10 21:36:14
【问题描述】：

我有以下对象：

var obj = { key1: 'value1', key2: 'value2', key3: 'value3' }

var obj = {
    	key1: 'value1',
    	key2: 'value2',
    	key3: 'value3'
    }
    
    $('#myTable thead tr').append('<th>Key Column</th>');
    $('#myTable thead tr').append('<th>Value Column</th>');
    var markup = '';
    for (var i in obj) {
    	markup = "<tr><td>" + i + "</td></td><td>" + obj[i] + "</td></tr>";
    	$("#myTable tbody #first-col").append(markup);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
       <thead>
          <tr>
          </tr>
       </thead>
       <tbody>
          <tr id="first-col">
          </tr>
       </tbody>
    </table>

我想通过循环对象来创建一个表。但我是这样的：

+-------------+--------------+
| Key Column  | Value Column |
+-------------+--------------+
| key1 value1 |              |
+-------------+--------------+
| key2 value2 |              |
+-------------+--------------+
| And so on.. |              |
+-------------+--------------+

请指导我如何正确执行它。或者如果最好使用 jQuery 再次生成整个表格，请告诉我该怎么做？谢谢

【问题讨论】：

您正在生成行/<tr>s，但是您不是将它们附加到tbody，而是将它们附加到第一行...
要添加到 Chris 的评论中，您还可以在键列后添加一个 </td>。
“但我越来越像这样了” - 你看错了输出。不要只检查最终渲染的结果。您的代码正在构建 HTML。查看它生成的 HTML。你觉得它正确吗？为什么不？它出什么问题了？如果生成的 HTML 字符串对您来说是正确的，那么您需要一些关于如何在 HTML 中创建表格的教程/指南。如果它看起来不正确，那么它会为您提供调试代码所需的所有信息。
` $("#myTable tbody #first-col").append(markup);`你的选择器不像@ChrisG所说的那样正确，使用这个$("#myTable tbody").append(markup);
正如@dotoconnor 所说，markup = "<tr><td>" + i + "</td></td><td>" + obj[i] + "</td></tr>"; 有一个额外的结束标签</td>，你可以使用这个<tr><td>" + i + "</td><td>" + obj[i] + "</td></tr>

标签： javascript jquery html html-table

【解决方案1】：

改变这一行：

$("#myTable tbody #first-col").append(markup);

到这里：

$("#myTable tbody").append(markup);

像这样：

var obj = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3'
}

$(function() {  
  $('#myTable thead tr').append('<th>Key Column</th>');
  $('#myTable thead tr').append('<th>Value Column</th>');
  var markup = '';
  for (var i in obj) {
    markup = "<tr><td>" + i + "</td><td>" + obj[i] + "</td></tr>";
    $("#myTable tbody").append(markup);
  }
});

我还删除了 cmets 中提到的额外 </td>。

然后就可以了。代码笔：https://codepen.io/haukurhaf/pen/jQWNGe

【讨论】：

谢谢哥们。它确实解决了这个问题。