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

希望这会有所帮助.

Answer 2

你需要将tr内部附加到内部,table所以我在你的循环中更新你的选择器并删除了结束,table因为没有必要.

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

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

主要问题是你要附加tr到divhere_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);

Answer 3

当你使用时append,jQuery期望它是格式良好的HTML(纯文本计数). append不喜欢这样做+=.

您需要先制作表格,然后附加它.

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

Answer 4

或者这样使用ALL jQuery.每个都可以遍历任何数据,无论是DOM元素还是数组/对象.

var data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
var numCols = 1;           


$.each(data, function(i) {
  if(!(i%numCols)) tRow = $('<tr>');

  tCell = $('<td>').html(data[i]);

  $('table').append(tRow.append(tCell));
});
?

http://jsfiddle.net/n7cyE/93/