使用 jQuery 创建表 - 追加

我的页面 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>

I doing:

$('#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);

希望这会有所帮助。