表与twitter bootstrap和jQuery

Question

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

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

Answer 1

首先，你没有追加表中所需的任何<tr>元素，其次你指的是$("table_div")而不是$("#table_div") （标签#表示你'引用ID，就像在CSS中一样）。

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

Answer 2

除了引用节点<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中的表行

编辑：

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

表与twitter bootstrap和jQuery

问题描述

2 个解决方案

解决方案1
9 已采纳 2012-09-22 16:46:24

解决方案2
5 2012-09-22 17:16:44

表与twitter bootstrap和jQuery

问题描述

2 个解决方案

解决方案1 9 已采纳 2012-09-22 16:46:24

解决方案2 5 2012-09-22 17:16:44

解决方案1
9 已采纳 2012-09-22 16:46:24

解决方案2
5 2012-09-22 17:16:44