用jQuery创建表-追加

Question

我在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>

为什么？我怎样才能正确地做到这一点？

Answer 1

这行：

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

希望这会有所帮助。