javascript - 根据可见行数有条件地在表上显示按钮

Question

我有一个表单，它允许用户通过底行中的按钮添加新的表格行，一切正常，还允许用户删除表格行，但始终会保留一行可见。您可以在这个 jsFiddle 看到一个工作示例.

我现在需要对“删除”按钮的显示方式进行更改。当前，只有一行时它不会出现，但是当您添加一行时，它会出现在除最后一行之外的所有行中。我需要使用以下规则更改它:

(i) 如果只有一行，删除按钮不应该出现(ii) 如果有 2 行，则删除按钮应出现在所有行上，但如果有一行是删除规则 (i)，则不应再次出现删除按钮(iii) 如果有 3 行，删除按钮应该出现在所有行上，但如果他们删除 2 行，则适用规则 (i)

等等。

我将删除按钮隐藏在第一行，如下所示:

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

我在这一点上完全被难住了 - 感谢任何解决这个问题的方法。谢谢!

Answer 1

您好，我已经更新了您的代码。现在它在 fiddle 上工作。

$('#lastYear').on('click', '.delbtn', function () {
      var tableRef=$(this).parent("td").parent("tr").parent("tbody");
      $(this).closest('tr').remove();
      if( tableRef.find("tr").length==3){
        tableRef.find("tr").find("input.addbtn").show();
        tableRef.find("tr").find("input.delbtn").hide();
      }else{
        tableRef.find("tr:last").find("input.addbtn").show();
      }
});

  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').show();
     cloned.find("[id^=lastYearSelect]")
    .autocomplete({
        source: availableTags,
        select: function (e, ui) {

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

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