带有 twitter 引导程序和 jQuery 的表答案

【问题标题】：Table with twitter bootstrap and jQuery带有 twitter 引导程序和 jQuery 的表
【发布时间】：2012-09-22 16:43:15
【问题描述】：

我有这个脚本的 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>

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

【问题讨论】：

我没有twitter bootstrap风格的表格
data的结构是什么？是简单数组还是json对象？
是一个json对象。我有几个时间戳矩阵：值

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

不起作用。我想要一个带有数据值的行和列的
元素。
@sharkbait 你的数据是什么样的？

【解决方案2】：

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

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

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

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

更多研究请看这里Add table row in 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>

【讨论】：

哈，没错，它不能。 $.each(callback)。没有两个选项。您需要在 javascript 中使用常规 foreach 而不是 jQuery 中的 $.each() 。它用于迭代所有子节点。
如果还是不行，请提供更多关于data的细节。如果工作，请不要忘记将此标记为答案，我花了一段时间;）
嗯，$.each(dataset,handler) 工作得很好。 $('.el').each(handler) 只接受一个参数。
哦，对了this each。这个问题快把我逼疯了。 @sharkbait 能否请您发布数据转储？
约翰感谢您的帮助。我没有数据转储，而是由一对“时间戳：值”组成的 json 数据。我会用这两列创建一个表...