Question

我正在尝试将表行附加到现有表。

这就是我的表格结构：

<div id="productListContainer">
    <table id="productListTable">
            <thead>
                <tr>
                    <td>
                        #
                    </td>
                    <td>
                        Product Name
                    </td>
                    <td>
                        Price
                    </td>
                    <td>
                        Quantity
                    </td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
</div>

使用以下函数，我试图附加一个新的表格行：

function(data) {
                if (data.productAdded !== "undefined") {
                  $("#productListTable tr").append().html(data.productAdded);
                }
              }

成功追加一行。但是，如果我选择一个触发相同功能的不同项目，则添加的表格行将被新的表格覆盖。

我在ajax调用中使用此函数作为成功消息。

'data'是一个JSON对象，它包含productAdded，它本身就是一个字符串表格行。

Answer 1

你想要做的是在我假设的表格的主体上添加一行。为此你需要这样做 -

$("#productListTable tbody").append(html_string);

您的html_string需要包含所有必需的<tr>和<td>元素才能与您的表格标题相匹配。

参考文献 -

.append()文档 - http://api.jquery.com/append/
jsFiddle demo

Answer 2

不带参数调用.append()，不附加任何内容，并返回原始jQuery对象。因此，当您致电.html()时，您正在替换<tr>的内容。

应该是：

$("#productListTable tr").append(data.productAdded);

编辑：这会附加到<tr>内的<thead>。我假设您要附加到<tbody>。

$("#productListTable tbody").append(data.productAdded);

编辑2 ：在附加到表格时，您需要确保在字符串中有<tr>和正确数量的<td>。

.append（）删除添加的元素

2 个答案: