删除表行除第一行外

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

演示：小提琴