刪除第一行以外的表格行

Question

我有一個表單，允許用戶通過底部行中的按鈕添加新的表格行，這一切都很好。我現在還需要添加功能來增加一個按鈕，以允許他們刪除一個表格行。

我收集的最簡單的方法是使用：

$(this).closest('tr').remove(); 

，但我有麻煩了這個集成到現有的功能。我也只需要「刪除」按鈕出現在除第一行之外的所有行上（即用戶可以刪除除第一行之外的所有行）。我設置這裏的jsfiddle演示我目前的功能：

http://jsfiddle.net/fmdataweb/daayf/1/

所以在我的例子，當用戶點擊「添加另一個活動」按鈕，它應該創建新錶行，因爲它目前確實也添加刪除該行的「刪除」按鈕。我現在將「刪除」按鈕硬編碼到第一行，因爲我現在確定如何使其僅顯示通過「添加新活動」按鈕創建的新行。

Answer 1

一些變化

在起始標記，添加類addbtn和delbtn也隱藏刪除按鈕

<td> 
    <input type="button" class="button mt5 addbtn" value="Add another activity" id="button1" name="button2" /> 
</td> 
<td> 
    <input type="button" class="button mt5 delbtn" value="Delete" id="deleteRowButton" name="deleteRowButton" style="display: none"/> 
</td> 

然後

$('#lastYear').on('click', '.delbtn', function() { 
    $(this).closest('tr').remove() 
}); 

var newIDSuffix = 2; 
$('#lastYear').on('click', '.addbtn', function() { 
    var thisRow = $(this).closest('tr')[0]; 
    $(thisRow).find('.delbtn').show(); 

    var cloned = $(thisRow).clone(); 
    cloned.find('input, select').each(function() { 
     var id = $(this).attr('id'); 
     id = id.substring(0, id.length - 1) + newIDSuffix; 
     $(this).attr('id', id); 
    }); 

    cloned.insertAfter(thisRow).find('input:text').val(''); 
    cloned.find('.delbtn').hide(); 
    cloned.find("[id^=lastYearSelect]") 
    .autocomplete({ 
     source: availableTags, 
     select: function (e, ui) { 

      $(e.target).val(ui.item.value); 
      setDropDown.call($(e.target)); 
     } 
    }).change(setDropDown); 

    $(this).remove(); 
    newIDSuffix++; 
}); 

演示：Fiddle

Answer 2

我建議爲每一行動態添加一個id屬性，這種方式您可以用jQuery來引用id。

Answer 3

這樣做怎麼樣？

$(this).find('tr').length > 0 ? $(this).closest('tr').remove() : ; 

Answer 4

爲什麼你的「添加新活動」和「刪除」具有相同的類「按鈕mt5」？不知道是否允許空間名稱的類。

你可能想在這裏引用我的表http://jsfiddle.net/yvonnezoe/nbrSR/1/：D我有一個固定的行上面和動態行之後可以刪除。

我的新建一行如下：

var str = '<tr id="' + rowID + '">' + '<td>' + index + '</td><td>' + rowID + '</td><td class="type_row_' + textInput + '">' + type + '</td><td class="feedback number">' + textInput + '</td>' + '<td id="status_'+rowID+'"></td>' + '<td><input type="checkbox" name="CB" id="monitor_' + rowID + '" class="custom" data-mini="true" /><label for="CB"> </label></td><td class="outputRemove">x</td>' + '</tr>'; 
$('#status_table tr:last').after(str); 

刪除按鈕都具有相同的類。所以點擊時可以刪除行。

$('#status_table').on('click', '.outputRemove', function() { 
$(this).closest('tr').remove(); 
$('#status_table tbody tr').find('td:first').text(function (index) { 
    return ++index; 
}); 

}）;

希望它激發你以某種方式:)

Answer 5

您可以設置一個特定的類像這樣

<input type="button" class="button mt5 deleteButton" value="Delete" id="deleteRowButton" name="deleteRowButton" /> 

按鈕和這個代碼添加到jQuery的

$('.deleteButton').on('click',function(){ 
    $(this).parent().parent().remove(); 
}); 

這個jQuery刪除用deleteButton Class（刪除按鈕）輸入的祖父母，它是它所在的行。

Answer 6

試試這個

在您的刪除按鈕

$('#lastYear').on('click', '#deleteRowButton', function(e){ 
    $(this).closest('tr').remove() 
}) 

Answer 7

首先我改名的你Button1爲您添加行addRowButton然後我改變委託方法更具體，以addRowButton是從

$('#lastYear').delegate('input[type="button"]' 

像這樣：

$('#lastYear')delegate('input[type="button"][id^="addRow"]' 

然後委託方法內具體之後

$(this).attr('id', id); 

餘之後，下面的一個添加：

var checkid = $(this).attr('id').substring(0,id.length-1); 

if (checkid == 'deleteRowButto') // the 'deleteRowButto' is not a mistake 
    { 
     $(this).click(function() { 
      $(this).closest("tr").remove(); // I assign an onclick for the delete button in order to remove a specific row 
      }); 
     } 

編輯：

我做了一些改進，一旦排被刪除前面的添加按鈕顯示，所以我添加下面的代碼：

var showmenow = $(this).closest("tr").prev().find("td:eq(5)").find("input[type='button']");    
$(showmenow).show(); 
      $(this).closest("tr").remove(); 
      }); 

，而不是在原來的代碼刪除按鈕，然後：

$(this).remove(); 
newIDSuffix++; 

我用皮來代替：

$(this).hide(); 
newIDSuffix++; 

見我創建的新jsfiddle。

Answer 8

退房這個！

if($("table tr").length > 1) {
$(this).parent().parent("tr").remove(); }

Answer 9

既然你要使用的第一行作爲模板的所有其他行，但不希望對所有其他行的刪除，我們應該只插入過程中的Java腳本首先插入刪除。檢查這個演示，我修改你的小提琴這個工作。

if(cloned.find('input.mt5[value="Delete"]').length==0){ 
    cloned.find('.mt5').each(function(){ 
     cloned.append($('<td><input type="button" class="button mt5" value="Delete" id="deleteRow'+newIDSuffix+'" name="deleteRowButton" /></td>')); 
    }) 
} 

現在用於處理刪除事件

$('#lastYear').delegate('input.button[value="Delete"]', 'click', function() { 
    var thisrow=$(this).parent().parent(); 
    var button=thisrow.find("input.button[value='Add another activity']"); 
    if(button.length>0){ 
     var buttoncell=button.parent().detach(); 
     var prevrow=thisrow.prev(); 
     var prevDelete=prevrow.find('input.button[value="Delete"]'); 
     var previd=(prevDelete.length>0)?prevDelete[0].id:'deleteRow1'; 
     buttoncell.children()[0].id=previd.replace('deleteRow','button'); 
     prevrow.find('input:text:last').parent().after(buttoncell); 
    } 
    thisrow.remove(); 
}); 

演示：http://jsfiddle.net/vwdXD/2/

Answer 10

你已完成了正確的除了在這裏和那裏的小疏忽的大部分。我已經修復了你的代碼，你可以在這裏找到它：http://jsfiddle.net/ManojRK/86Nec/。

請嘗試通過使用代碼區分工具（如http://www.quickdiff.com）比較您的版本和我的版本來了解更改。它會教你很多。

更改時間：

1. 我已經使用的樣式來顯示和隱藏的按鈕。這不是唯一的方法。但是，由於您正在克隆要添加的行，所以使用樣式將使您的JavaScript變得簡單。這是一個少得多的bug並且不易受到變化的影響。
2. 我已經介紹了css類來區分Add Another Activity和Delete按鈕的click事件。

希望它能幫助你理解。

Answer 11

我用你提供的jsfiddle來回答你的問題，希望更直接。我把方法是：

1. 檢查是否添加或刪除按鈕被按下
2. 如果刪除按鈕被按下，檢查其刪除按鈕包含在第一行（實際上是第三行中，但這是用戶輸入的第一行）。如果刪除按鈕位於第一行，則不執行任何操作
3. 如果刪除按鈕不在第一行，則在上一行中創建一個「添加活動」按鈕，並移除已單擊的按鈕的父行。

第1步：

// let's check whether they clicked the add or delete button 
    if ($(this).val() == 'Add another activity') { // if the add button was clicked 

步驟2-3：

 if ($(thisRow).index() == 2) { // if it's the first row, don't let them delete 
      return false; 
     } else { // if it is not the first row remove this row and create an 'add' button in first row 
      $(thisRow).prev().find('td:last').prev().append('<input type="button" class="button mt5" value="Add another activity" id="button2" name="button2">'); 
      $(thisRow).remove(); 
     } 

這裏有一個搗鼓雅：http://jsfiddle.net/daayf/22/

我把一對夫婦的意見代碼助陣一點點。我的編輯是在：

• 線275-276
• 線300-307

希望這有助於出去！

Answer 12

非常簡單的方法

function remove_point_item(th) { 
     var tr = $(th).closest("tr"); 
     var _counter=0; 
     $(tr.siblings('tr')).each(function(){ 
      _counter++; 
     }); 
     if(_counter!=1){   
     tr.remove(); 
     } 

}