Question

我试图编写一个非常简单的js脚本来动态创建表。这是我使用的：

$("#resultsTable").append("<tr>")
for (var i=0; i<statsHolder.length; i++){
    $("#resultsTable").append("<td>" + statsHolder[i] + "</td>");
}
$("#resultsTable").append("</tr>")

statsHolder是一个数组，包含我想在表格中显示的数据。我面临的问题是创建的html代码没有像我希望的那样排序。而不是：

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>

这就是我得到的：

<tr></tr>
<td></td>
<td></td>
<td></td>
<tr></tr>
<td></td>
<td></td>
<td></td>

我想我的问题是我的循环之后的代码是在循环开始之前执行的。我该怎么办呢？谢谢你的帮助：）

Answer 1

使用字符串代替

var table = "<tr>";

for (var i=0; i<statsHolder.length; i++){
   table += "<td>" + statsHolder[i] + "</td>";
}

table += "</tr>";
$("#resultsTable").append(table)

Answer 2

你可以这样做：

$("#resultsTable").append("<tr>").attr('id', 'sampletable');

for (var i=0; i<statsHolder.length; i++){

    $("#sampletable").append("<td>" + statsHolder[i] + "</td>");

}

如果您想将它用于多行，请尝试以下方法：

for (var j=0; j< 10; j++) { 

    $("#resultsTable").append("<tr>").attr('id', 'tablenamerow-'+j);

    for (var i=0; i<statsHolder.length; i++){

        $("#tablenamerow-"+j).append("<td>" + statsHolder[i] + "</td>");

    }
}

您可以在此处将var j的限制更改为您要生成的行数。我只是随意放了10号。如果您使用此设置有多个表，则每个表的tablename也是唯一的。

Answer 3

Jquery只会将VALID html插入树中。您没有构建一个html字符串 - 您正在修改实时DOM树，这意味着您的最终.append('</tr>')完全无效。你不能＆＃34;追加＆＃34;结束标签。

一般来说，像你一样重复进行DOM操作是一种循环，效率低下。构建一个HTML字符串然后将其作为单个块附加起来更容易，从而无需一遍又一遍地重建/修改DOM树。

html = '<tr>';
for(...) {
    html += '<td>' + foo + '</td>'
}
html += '</tr>';
$('#resultsTable').append(html);

Answer 4

您要将<td>附加到表而不是行将<tr>保留在变量中，并将<td>元素附加到其中：

var tr = $("<tr/>").appendTo($("#resultsTable"));
for (var i=0; i<statsHolder.length; i++){
    $("<td/>").text(statsHolder[i]).appendTo(tr);
}

您也不需要关闭<tr>或<td>，因为第一行会创建整个元素

Answer 5

jQuery在附加到新行之前解析标记，您需要创建一行然后追加到该行，然后附加到表

   var statsHolder = [ 1,2,3,4,5,6,7,8,9,10];
    var me = $('<tr></tr>');
    for (var i=0; i<statsHolder.length; i++){

        me.append("<td> " + statsHolder[i] + "</td>");
    }
  $("#resultsTable").append(me);

参见示例

http://plnkr.co/edit/sAnWY3?p=info

Answer 6

您可以创建<tr>元素并在临时变量中跟踪它，而无需为其添加必要的ID属性

var myTr = $('<tr>');
$("#resultsTable").append(myTr)
for (var i=0; i<statsHolder.length; i++){
    myTr.append("<td>" + statsHolder[i] + "</td>");
}

http://jsfiddle.net/stL42ak3/

使用js创建表的问题：order和

6 个答案: