Question

我正在使用Bootstrap绘制一个简单的两列表，与Bootstrap页面中的表完全相同：http://getbootstrap.com/css/#tables。 What is desired 为此，我正在使用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")

问题在于我没有得到相同的结果，我获得了一张包含两列的表格。标题与其他行不对齐。就像你在这里看到的： What I obtain

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

Answer 1

您的代码存在以下问题：

1）您没有使用<colgroup>作为引导程序示例。这就是为什么表没有正确对齐。

2）您根本没有使用<thead>或<tbody>，这就是为什么表格未正确对齐的另一个原因，以及您的.table-striped表格没有条纹化的原因。用于条带化行的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);

这是一个演示 - ＆gt;的 http://jsfiddle.net/j11mj21x/

引导表不像预期的那样

1 个答案: