Question

我有以下对象：

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再次生成整个表，请告诉我该怎么做？谢谢

Answer 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);
  }
});

我还删除了评论中提到的</td>。

然后它起作用。 Codepen：https://codepen.io/haukurhaf/pen/jQWNGe

如何通过对象循环生成HTML表？

1 个答案: