4

私はスクリプトのこのjs部分を持っています：

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

これを使用して、twitterブートストラップを使用してテーブルを作成します。htmlページには、次のテーブル要素があります。

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

しかし、このソリューションは機能しません。どうすればいいですか？ありがとうございました！

4

2 に答える 2

9

まず<tr>、テーブルに必要な要素を追加していません。次に、$("table_div")代わりに参照しています$("#table_div")（ハッシュタグ#は、CSSの場合と同様にIDを参照していることを意味します）。

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に、テーブルノードに何も追加したくありません。

これだけでなく、こことここも見てください。

たとえば、Twitter Bootstraptbodyを使用する場合は、次のように使用する必要があります。

<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のブートストラップと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 に答える