테이블의 행 추가/제거

Question

테이블의 행을 추가 및 제거하는 데 다음 jquery 코드가 있습니다. 한 페이지에 여러 개의 표가 있습니다. 각 테이블의 각 행에는 .row-add와 .row-delete가 있습니다.

이제 '.row-add'를 클릭하여 새 행을 추가하면 모든 테이블이 영향을받습니다. 동일한 페이지의 모든 표에 추가됩니다. 클릭 할 때 자체 테이블에만 적용되도록하려면 어떻게해야합니까?

JQuery와 :

$(document).ready(function() { 
    $('.row-delete').click(function() { 
     $(this).closest("tr").remove(); 
    }); 

    $('.row-add').click(function() { 
     $(this).closest("tr").clone(true).appendTo(".table-comparison"); 
    }); 

    }); 

HTML :

<div id="tab-1" class="tab-section"> 
          <div class="container flat rounded-sm bspace"> 
          <table cellspacing="0" class="display table-comparison"> 
         <thead> 
          <tr> 
           <th><span>Effective Date</span></th> 
           <th><span>Price</span></th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td><input class="effective-date" type="text" value="01/01/2013"> - <input class="effective-date" type="text" value="06/05/2015"> 
       <span class="row-add"></span> 
       <span class="row-delete"></span> 
        </td> 
       <td> 
       $<input class="price" value="50"> 
       /
       <select> 
        <option>Second</option> 
        <option>Minute</option> 
        <option>Hour</option> 
        <option>Day</option> 
        <option>Week</option> 
        <option>Biweek</option> 
       </select> 
       /
       <select> 
        <option>Day</option> 
        <option>Week</option> 
        <option>Biweek</option> 
        <option>Month</option> 
        <option>Quarter</option> 
        <option>Year</option> 
       </select> 
       <span class="row-add"></span> 
       <span class="row-delete"></span> 
       </td>       
       </tr> 


       <tr class="price-present"> 
           <td><input class="effective-date" type="text" value="07/01/2013"> - <span class="effective-date">Present</span> 
       <span class="row-add"></span> 
       <span class="row-delete"></span> 
        </td> 
       <td> 
       $<input class="price" value="40"> 
       /
       <select> 
        <option>Second</option> 
        <option>Minute</option> 
        <option>Hour</option> 
        <option>Day</option> 
        <option>Week</option> 
        <option>Biweek</option> 
       </select> 
       /
       <select> 
        <option>Day</option> 
        <option>Week</option> 
        <option>Biweek</option> 
        <option>Month</option> 
        <option>Quarter</option> 
        <option>Year</option> 
       </select> 
       <span class="row-add"></span> 
       <span class="row-delete"></span> 
       </td>       
       </tr> 

       <tr> 
           <td><input class="effective-date" type="text" value="01/01/2011"> - <input class="effective-date" type="text" value="06/30/2012"> 
       <span class="row-add"></span> 
       <span class="row-delete"></span> 
        </td> 
       <td> 
       $<input class="price" value="30"> 
       /
       <select> 
        <option>Second</option> 
        <option>Minute</option> 
        <option>Hour</option> 
        <option>Day</option> 
        <option>Week</option> 
        <option>Biweek</option> 
       </select> 
       /
       <select> 
        <option>Day</option> 
        <option>Week</option> 
        <option>Biweek</option> 
        <option>Month</option> 
        <option>Quarter</option> 
        <option>Year</option> 
       </select> 
       <span class="row-add"></span> 
       <span class="row-delete"></span> 
       </td>       
       </tr> 




         </tbody> 
        </table> 
         </div> 
         </div> 

Answer 1

시도는 ... 가까운 곳 ("TR") 모든 TRS를 선택하는 구체적합니다.

ID 또는 클래스를 지정하고 jquery를 사용하여 해당 ID를 선택하십시오.

Answer 2

문제는 jQuery 선택기가 클래스 속성에 있다는 것입니다. 단일 테이블을 참조하려면 id로 이동해야합니다.

onclick="addrow(table_id)" 

:이 경우

나는 당신이 자동으로 ID를 생성 한 모든 테이블에 추가 할 모든 클릭 행에 다음 코드를 추가, 프로그래밍 HTML 코드를 생성하는 경우 가장 좋은 방법은, 생각 table_id는 테이블의 자동 생성 된 ID입니다. 그런 다음 :

function addrow(table) {$(table).closest("tr").clone(true).appendTo(".table-comparison");} 

그냥 또한 .table-비교가 ID로 전환 피해야한다고 경고,하지만 난 코드의 세부 사항을 알고하지 않습니다!

희망이 도움이됩니다.

편집 : 당신은 코드를 생성하지 않는 경우 여전히 더 나은,

$("p").bind("click", function(event){ 

처럼, 당신은 이벤트를 보낸 사후에 액세스 할 수 있습니다이 방법 바인드 기능입니다. 귀하의 경우에는 당신은 당신이 쓸 수 있다고 생각 :

$(".row-delete").bind("click", function (event) { 
    event.target.closest("tr").remove(); 
    }); 

$(".row-add").bind("click", function (event) { 
    event.target.closest("tr").clone(true).appendTo(".table-comparison"); 
    }); 

출처 : JQuery Doc