.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調用中使用這個函數作爲成功消息。

'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>在你的字符串正確的號碼。