.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'는 table 행 자체가 productAdded를 포함하는 JSON 객체입니다.

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); 

편집 : 그 <thead> 내부 <tr>에 추가됩니다. <tbody>에 추가하려고한다고 가정합니다.

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

편집 2는 : 테이블에 추가 할 때, 당신은 당신이 <tr>하고 문자열에 <td>의 오른쪽 번호가 있는지 확인해야합니다.