4

我有脚本的这个 js 部分：

jQuery.each(data, function(index, value) {
     $("table_div").append("<td>" + value + "</td>");
 });

我想用它来创建一个带有 twitter bootstrap 的表。在 html 页面中有这个表格元素：

<table class="table table-striped" id="table_div">
</table>

但是这个解决方案不起作用。我该怎么办？谢谢！

4

2 回答 2

9

首先，您没有<tr>在表中附加任何需要的元素，其次您指的是$("table_div")而不是$("#table_div")（主题标签#意味着您指的是一个 ID，就像在 CSS 中一样）。

jQuery.each(data, function(index, value) {
     $("#table_div").append("<tr><td>" + value + "</td></tr>");
});
于 2012-09-22T16:46:24.683 回答
5

除了引用节点<table_div>而不是 id之外#table_div，您不想将任何内容附加到表节点。

你应该看看this以及here和here。

无论如何，您应该tbody在使用Twitters Bootstrap时使用，例如：

<table id="table_div" class="table table-striped">
  <tbody></tbody>
<table>

这里是正确的 js

for (i in data) {
  $('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>');
}

有关更多研究，请查看此处在 jQuery 中添加表格行

编辑：

好的，我用 twitters bootstrap 和 jQuery 给你写了一个完整的例子。这有效，如果它不适用于您的数据数组，则说明它有问题。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<table class="table table-striped" id="my-table">
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
var data = ["foo","bar"];
$(document).ready(function(){
        $.each(data, function(i,item){
                $('#my-table > tbody:last').append('<tr><td>'+item+'</td></tr>');
        });
});
</script>
</body>
</html>
于 2012-09-22T17:16:44.963 回答