javascript - 使用 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>

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

直播:http://jsfiddle.net/n7cyE/

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);

希望这会有所帮助。