Question

我正在尝试遍历对象，当遇到与数组匹配的某些字符串时，表行应该附加到表中，并在单元格中包含该字符串。

输出成功运行，但是，不是将新行添加到先前行之下，而是将它们添加到当前行，因此我有一个超长行而不是五个较短宽度行。我发现如果我在循环外做了同样的事情，它可以根据需要工作，但是在循环内部，它没有。也许循环导致问题，因为我正在追加相同的tr？

HTML：

<table id="tableMemberResults">
    <thead>
        <tr>
            <th>Member</th>
            <th>Bill To</th>
            <th></th>
            <th>Hours</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JS：

var tbody = $("#tableMemberResults tbody");
var userTr = $('<tr>');

...

for (i in users) {
            if (typeof users[i] == "object") {
                if (userArray.indexOf(i) >= 0) {
                    $('<td>').html(i).appendTo(userTr).css("background-color", "#ffba59");
                    $('<td colspan = "3">').html("").appendTo(userTr).css("background-color", "#ffba59");
                    tbody.append(userTr);
                }
                recursiveIter(users[i]);
            }

    $('<td>').html(i).appendTo(userTr).css("background-color", "#ffba59");
    $('<td colspan = "3">').html("").appendTo(userTr).css("background-color", "#ffba59");
    tbody.append(userTr);
}

如上所述，我复制了我的代码并在循环之外使用了一个新的tr变量并且它有效。以下是我的更改。

HTML：

var trTest = $('<tr>');

JS：

$('<td>').html("this is a test").appendTo(trTest).css("background-color", "#ffba59");
$('<td colspan = "3">').html("").appendTo(trTest).css("background-color", "#ffba59");
tbody.append(trTest);

这完美无缺。我仍然有我的大量长行代码，但新的trTest行作为单独的行正确附加。唯一的区别是我不在我的for循环中。

我需要在循环中更改哪些内容才能正常工作？

编辑：这是基于Dan的建议的新代码块

$('<td>').html(i).appendTo($('<tr>')).css("background-color", "#ffba59");
$('<td colspan = "3">').html("").appendTo($('<tr>')).css("background-color", "#ffba59");
tbody.append($('<tr>'));

Answer 1

这是因为您创建了一个userTr，然后一遍又一遍地附加到它。删除变量并替换为$('<tr>')，每次都会得到一个新的tr。

您还想要将新tr附加到tbody（或表本身）。

JQuery追加到表行的末尾而不是Tbody？

1 个答案: