使用 Twitter Bootstrap 和 jQuery 创建表格

Question

使用 Twitter Bootstrap 和 jQuery 创建表格

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>

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

- sharkbait

我没有 Twitter Bootstrap 风格的表格。 - sharkbait

data 的结构是什么？它是一个简单的数组还是一个 JSON 对象？ - Bogdan

是一个 JSON 对象。我有一个时间戳和值的矩阵。 - sharkbait

2个回答

5

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

您应该查看这里，以及这里和这里。

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

如果需要更多研究，请查看在 jQuery 中添加表格行

编辑：

好的，我用 Twitter 的 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>

- codingjoe

哈，没错，它不能。$.each(callback)。没有两个选项的each。你需要在JavaScript中使用常规的foreach，而不是来自jQuery的$.each()。它用于迭代所有子节点。 - codingjoe

如果还是不行，请提供有关“data”的更多详细信息。如果可以的话，请别忘了将其标记为答案，我花了一些时间 ;) - codingjoe

1

嗯，*$.each(dataset,handler)* 运行良好。而 $('.el').each(handler) 只接受一个参数。 - m90

哦，对了，看一下这个 each。这个问题让我发疯了。 @sharkbait，你能否发布一份数据转储吗？ - codingjoe

我John感谢您的帮助。我没有数据转储，但是有一组由“时间戳：值”组成的JSON数据。我想创建一个具有这两列的表... - sharkbait

@sharkbait，我添加了一个完整的演示。请不要忘记给我一些赞;) 如果它不能与您的数据数组一起使用，则可能有问题。 - codingjoe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- h2ooooooo · Accepted Answer

首先，您没有添加任何表格所需的<tr>元素。其次，您引用了$("table_div")而不是$("#table_div")（#符号表示您正在引用一个ID，就像在CSS中一样）。

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