javascript - .append() 删除添加的元素

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 调用中使用此函数作为成功消息。

“数据”是一个包含 productAdded 的 JSON 对象，它本身是作为字符串的表行。

Answer 1

您想要做的是将一行附加到我假定的表的正文中。为此你需要这样做 -

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

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

引用资料-

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