添加/刪除表中的行

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。

在這種情況下，我認爲最好的辦法是，如果生成程序的HTML代碼，添加到自動生成的ID每個表，並添加到每個點擊的行下面的代碼：

onclick="addrow(table_id)" 

哪裏table_id是表的自動生成的ID。然後：

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

只是要警告，也應避免切換到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