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

Question

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

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

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