[解決済み] jQueryでテーブルを作成する - append

質問

ページ内にdiv.があります。

<div id="here_table"></div>

で、jqueryで。

for(i=0;i<3;i++){
    $('#here_table').append( 'result' +  i );
}

を生成しています。

<div id="here_table">
    result1 result2 result3 etc
</div>

これをテーブルで受け取りたい。

<div id="here_table">
    <table>
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
    </table>
</div>

しています。

$('#here_table').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

 $('#here_table').append(  '</table>' );

しかし、これは私のために生成されます。

<div id="here_table">
    <table> </table> !!!!!!!!!!
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
</div>

どうすれば正しく作れるのでしょうか？

LIVEを行います。 http://jsfiddle.net/n7cyE/

解決方法は？

この行です。

$('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );

に追加します。 div#here_table ではなく、新しい table .

いくつかのアプローチがあります。

/* Note that the whole content variable is just a string */
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#here_table').append(content);

しかし、上記の方法では、スタイルを追加して動的に何かを行うには <table> .

しかし、これはどうでしょう。期待に違わぬ素晴らしい出来栄えです。

var table = $('<table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

$('#here_table').append(table);

お役に立てれば幸いです。