使用js:order<创建表时出现问题;tr>并且<td>

Issues creating table with js : order <tr> and <td>

本文关键字：gt lt 问题 tr td 并且 js order 创建 使用      更新时间：2024-01-01

我正在尝试编写一个非常简单的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>

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

使用字符串代替

var table = "<tr>";
for (var i=0; i<statsHolder.length; i++){
   table += "<td>" + statsHolder[i] + "</td>";
}
table += "</tr>";
$("#resultsTable").append(table)
Jquery只会在树中插入VALID html。您不是在构建一个html字符串，而是在修改活动DOM树，这意味着您的最终.append('</tr>')完全无效。不能"附加"结束标记。

一般来说，像在循环中那样重复进行DOM操作是低效的。构建一个HTML字符串，然后将其附加为一个单独的块，这样就更容易了，省去了反复重建/修改DOM树的麻烦。

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

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

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

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

您可以创建<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/

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

您可以这样做：

$("#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也是唯一的。

相关文章：