.append(） 删除添加的元素

.append() removes added element

本文关键字：元素 添加 删除 append      更新时间：2023-09-26

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

这是我的表格的结构：

<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 对象，其中包含 productAdd，它本身就是字符串形式的表行。

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

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

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

引用-

  • .append()文档 - http://api.jquery.com/append/
  • js小提琴演示

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

它应该是：

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

编辑：这将附加到<thead>内的<tr>。 我假设您想附加到<tbody>.

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

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

相关文章：