1

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

这就是我的表格的结构：

<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，它本身就是作为字符串的表格行。

4

2 回答 2

3

您想要做的是在我假设的表格主体中附加一行。为此，您需要这样做 -

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

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

参考 -

于 2012-06-07T17:41:25.227 回答
2

不带参数调用.append()，不附加任何内容，并返回原始 jQuery 对象。所以，当你打电话时，.html()你正在替换<tr>'s 的内容。

它应该是：

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

编辑：那将附加<tr>到<thead>. 我假设你想附加到<tbody>.

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

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

于 2012-06-07T17:40:50.930 回答