用jQuery-append创建表

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (132)

我在页面上有:

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

为什么?我怎么才能做得对呢?

提问于
用户回答回答于

这一行:

$('#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></table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr></tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

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

希望这会有所帮助。

用户回答回答于
$('#here_table').append(  '<table />' );

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

主要的问题是,你是附加trdivhere_table。

这是一个JavaScript版本,如果性能是一个问题。使用文档片段不会导致循环的每次迭代都回流

var doc = document;

var fragment = doc.createDocumentFragment();

for (i = 0; i < 3; i++) {
    var tr = doc.createElement("tr");

    var td = doc.createElement("td");
    td.innerHTML = "content";

    tr.appendChild(td);

    //does not trigger reflow
    fragment.appendChild(tr);
}

var table = doc.createElement("table");

table.appendChild(fragment);

doc.getElementById("here_table").appendChild(table);

扫码关注云+社区

领取腾讯云代金券