Question

所以我有以下代码：

<script type="text/javascript">
    $(document).ready(
        function () {
            $("#txt").click(function () {
                var $TableRow = $('<tr></tr>');
                var $TableData = $('<td></td>');
                var $TableData2 = $('<td></td>');

                // Works
                $("#tblControls").append(
                $TableRow.html(
                $TableData.text("Test, Hello World3")
            )
    );

</script>
<div style="display: inline">
    <input type="button" id="txt" value="Add TextBox" style="" />
</div>
<br/>
<table id="tblControls" width="100%">

</table>

但是为什么这不会给tr添加两个td？

$("#tblControls").append(
    $TableRow.html(
        $TableData.text("Test, Hello World3")
        +
        $TableData2.text("Test, Hello World4")
    )
);

我得到的是：

[object Object][object Object]

Answer 1

因为+运算符将导致toString在其两侧的参数上被调用，从而产生[object Object]（因为$TableData.text("...")，因此返回jQuery对象;有关详细信息，请参阅text。

你想要的是：

$TableRow.append($TableData).append($TableData2);

请参阅文档中的append。

加载页面后，您需要在对象等元素等方面考虑更多，而在标记方面则更少。当你养成这种习惯时，它非常强大。

Answer 2

您正在尝试合并两个jQuery对象，而不是两个HTML字符串。 .text()方法返回jQuery对象以支持链接，而不是元素的HTML作为字符串。

您可以参考this SO question了解如何获取整个元素的HTML，包括实际元素。

这是未经测试的，但是这样的事情应该这样做：

$("#tblControls").append(
        $TableRow.html(
            $("<div />").append($TableData.text("Test, Hello World3")).html() + 
            $("<div />").append($TableData2.text("Test, Hello World4")).html() 
        ) 
);

然而，jQuery文档说明了.append（）期望的内容：

要插入的DOM元素，HTML字符串或jQuery对象匹配元素集中的每个元素。

由于它可以使用jQuery对象，因此您只需将$TableData和$TableData2传递给append-method即可。

$("#tblControls").append(
     $TableRow.append($TableData).append($TableData2);
);

使用jQuery将多个td添加到tr时感到困惑

2 个答案: