2015-10-26 100 views
0

刪除表中的行,我有以下代碼jQuery的動態ID

<div> 
    <input type="text" maxlength="20" id="nameText"></input> 
    <button type="button" id="add">Add</button> 
</div> 
<div> 
    <table id="form"> 
     <tbody> 
      <tr> 
       <th>Name</th> 
       <th>Delete</th> 
      </tr> 
     </tbody> 
    </table> 
</div> 

jQuery的部分

var rowNum = 0; 

$('#add').click(function() { 
    var name = $('#nameText').val(); 
    rowNum ++; 
    var row = '<tr id="row' + rowNum + '">' 
      + '<td>' + name 
      + '<button type="button" id="deleteRow' + rowNum + '">Delete</button>' 
      + '</td>' 
      + '</tr>'; 

    $(row).insertAfter($("#form > tbody > tr:last")); 
    $('#deleteRow' + rowNum).click(function() { 
     $('#row' + rowNum).remove(); 
    }); 
}); 

這將動態地添加表中的行,當你點擊「添加」按鈕,我想通過id刪除行,但它只刪除最後一行,我該如何解決它?

的jsfiddlehttp://jsfiddle.net/sgs603cm/

回答

2

不要使用增量id屬性 - 他們迅速成爲維持疼痛。

而是使用基於類選擇器的單個通用委託事件處理程序,並使用關鍵字this來引用引發該事件的元素。試試這個:

$('#add').click(function() { 
    var name = $('#nameText').val(); 
    rowNum ++; 
    var row = '<tr id="row' + rowNum + '">' 
      + '<td>' + name 
      + '<button type="button" class="delete">Delete</button>' 
      + '</td>' 
      + '</tr>'; 

    $(row).insertAfter($("#form > tbody > tr:last")); 
}); 

$('#form').on('click', '.delete', function (e) { 
    e.preventDefault(); 
    $(this).closest('tr').remove(); 
}); 
+0

THX,你幫了我很多! –

+0

沒問題,很樂意幫忙。 –

+0

@Rory McCrossan是否可以使用動態標識刪除一行? – user7397787

1

您需要使用,

$(document).on("click", "[id^='deleteRow']", function() { 
    $(this).closest("tr").remove(); 
}); 

你不應該使用循環click事件綁定。您可以爲元素指定一個類,也可以使用以選擇器開始的屬性。

就你而言,你也需要使用事件委託。因爲,您正在動態創建元素。

Fiddle