jquery - 附加到表时无法读取 null 的属性“childNodes”

Question

我想这将是一个非常明显的答案，但我自己真的找不到。

这是我的桌子（我省了你所有的 tds）

<table id="COA_Table">
    <thead>
        <tr>some th</tr>
    </thead>
    <tbody>
        <tr>some TD</tr>
    </tbody>
</table>

这是我的 jQuery 代码：

$(document).ready(function () {
    console.log("ready!");

    $('#COA_Table > tbody:last').append('<tr><td><input type=\"checkbox\"></td><td></td>New account<td></td><td></td></tr>');
})

最后，我得到的错误代码：

未捕获的类型错误：无法读取 null 的属性“childNodes”

这让我发疯

Answer 1

请注意，您的结构中存在错误

<td></td>New account<td></td>

此文本未放置在任何地方，可能会导致您的完整代码出现错误。

应该是

<td></td><td>New account</td>

带有这些编辑的演示

Answer 2

为了避免无效标记的问题，我将使用以下语法：

$(document).ready(function () {
    var tr  = $('<tr />'),
        td  = $('<td />'),
        td2 = $('<td />', {text: 'New account'}),
        inp = $('<input />', {type:'checkbox'});

    $('#COA_Table tbody').append( tr.append( td.append(inp), td2 ) );
});

这将创建带有开始和结束标签的每个元素，并将它们附加到适当的位置。

小提琴

Answer 3

在最后一个之后附加数据tr并且不tbody使用after()

 $('#COA_Table tr:last').after('<tr><td><input type=\"checkbox\"></td><td></td>New account<td></td><td></td></tr>');