javascript - 不符合预期的 Bootstrap 表

Question

我正在使用 Bootstrap 绘制一个简单的两列表，与 Bootstrap 页面中的完全一样:http://getbootstrap.com/css/#tables . 为此，我使用 javascript 来呈现它，您可以在此处看到:

                 $(\"#rep\").empty()
                 $(\"#rep\").append("<br><br><table class=\\"table table-bordered table-striped\\"><tr><th><strong>Title</strong></th><th><strong>Description</strong></th></tr>")
                 //for (var i = 0; i < ratings.length; i++) { 
                 for (var key in ratings){
                        var table = "";
                        table = "<tr> <th scope=\\"row\\"><code>"
                        table += key
                        table += "</code></th> <td>"
                        table += ratings[key]
                        table += "</td></tr>"
                        $(\"#rep\").append(table);
                    }
                 $(\"#rep\").append("</table>")
        }, "json")

问题是我没有得到相同的结果，我得到了一个表格，其中两列的标题没有与其他行对齐。就像你在这里看到的:

有谁知道可能是什么问题？ 提前谢谢你!

Answer 1

您的代码有几个问题:

1) 你没有使用 <colgroup>作为 Bootstrap 示例。这就是表格未正确对齐的原因。

2) 你没有使用 <thead>或 <tbody>根本上，这是表格未正确对齐的另一个原因，也是您的 .table-striped 的原因。表不是条纹的。 strip 化行的 CSS 是

.table-striped > tbody > tr:nth-of-type(odd) {
   background-color: #F9F9F9;
} 

话虽如此，你为什么要从头开始重新生成整个表？我会清空 <tbody>只有:

$("#rep table tbody").empty();

然后像这样追加新行:

var tr = 
  '<tr>'+
     '<th scope="row">'+
        '<code>'+key+'</code>'+
      '</th>'+
      '<td>'+ratings[key]+'</td>'+
   '</tr>';
   $("#rep table tbody").append(tr);

这是一个演示-> http://jsfiddle.net/j11mj21x/