除第一行外删除表格行

Question

我有一个表单，允许用户通过底部行中的按钮添加新的表格行，一切正常。现在我需要添加另一个按钮的功能，允许他们删除表格行。

我了解到最简单的方法是使用：

```javascript $('button').click(function(){ $(this).closest('tr').remove(); }); ```

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

但是我在将其集成到现有功能中遇到了麻烦。我只需要“删除”按钮出现在除第一行以外的所有行上（即用户可以删除除第一行以外的所有行）。我设置了一个jsfiddle，演示了我的当前功能：http://jsfiddle.net/fmdataweb/daayf/1/。

因此，在我的示例中，当用户单击“添加其他活动”按钮时，它应该像当前所做的那样创建新的表行，但也要添加“删除”按钮来删除该行。我目前已经在第一行硬编码了“删除”按钮，因为我不知道如何使它仅出现在通过“添加新活动”按钮创建的新行上。

- user982124

---

id="button1" name="button2" ！！？ - Billy Moon

你介意我问一下为什么要保留第一行吗？ - MervS

@nyde1319，数据表中应该始终至少有一行数据，因此他们需要将第一行保持到最小。 - user982124

我提供了一个可行的例子，但到目前为止我甚至没有收到任何回复。 - Edper

这个问题真的值得你辛苦赚来的50分吗？ - qualebs

我认为当只剩下一行时，您需要隐藏删除按钮 - 这并不一定意味着第一行。 - Michal

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

示例： 演示

- Arun P Johny

Answer 2

看这个！

如果（ $（“table tr”）.length > 1）{ $（this）.parent()。parent（“tr”）.remove（）; }

- Shailesh Rathod

Answer 3

尝试这个

在你的删除按钮上

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

- Sagar Hirapara

Answer 4

首先，我将您的 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++;

我使用hide代替：

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

请查看我创建的新jsfiddle示例。

- Edper

---

谢谢@Edper - 我在将您的建议集成到我的jsFiddle中遇到了问题。您能否更新我的fiddle并提供一个可工作的示例？ - user982124

@user982124，请检查我的新编辑。这次它完全正常工作了。我希望您能亲自查看并检查它。 - Edper

Answer 5

自从你想要将第一行作为所有其他行的模板，但不想在所有其他行上进行删除操作时，我们应该仅在JavaScript中进行第一次插入时插入删除。检查这个演示，我修改了你的fiddle使其能够工作。

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/

- pranav paruchuri

Answer 6

我使用你提供的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

第二步-第三步：

       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行

希望对您有所帮助！

- kyle.stearns

---

感谢您的贡献（我确实遇到了一些问题，即删除按钮按顺序后留下了一些没有相应表行的按钮）。非常感谢。 - user982124

糟糕，现在我感到有点傻。我已经更新了我的代码片段（你已经选择了一个答案），只是为了好玩。很高兴你解决了问题。 - kyle.stearns

Answer 7

你大部分是对的，只是有一些小疏忽。我已经帮你修复了代码，你可以在这里找到它：http://jsfiddle.net/ManojRK/86Nec/ 。

请使用代码比较工具（如http://www.quickdiff.com）比较你的版本和我的版本，以理解更改的内容。这会让你学到很多东西。

以下是更改的内容：

1. 我使用了样式来显示和隐藏你的按钮。这不是唯一的方法。但既然你正在克隆行添加，使用样式将使你的JavaScript简单。这样会减少错误和受变化的影响。
2. 我引入了css类来区分“添加其他活动”和“删除”按钮的click事件。

希望它能帮助你理解。

- ManojRK

---

谢谢，这个很好用 - 我可能不得不使用一个没有 CSS 的解决方案，但到目前为止你的解决方案运行良好。 - user982124

Answer 8

您可以像这样为按钮设置特定的类：

您可以将特定的类设置为按钮，就像这样

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

并将以下代码添加到jquery中。

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

这个jQuery代码会删除带有deleteButton类的输入框的祖先元素（即删除按钮所在的行）。

- farnoush resa

Answer 9

我建议为每一行动态添加一个id属性，这样你就可以通过jQuery直接引用该id。

- Cezary Wojcik

---

但是一个表单不能有相同的ID超过一次 :P 请检查，这可能会引起问题... - user1978134

这就是为什么你需要动态添加 id 属性。 - Cezary Wojcik

Answer 10

非常简单的方法

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

}

- zia