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

您好我已经更新了您的代码。现在它在小提琴工作。

$('#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++;
 });

Answer 2

请查看http://jsfiddle.net/wnSfa/7/ 这将适用于您告知的3条规则。

我做了更改

$('#lastYear').on('click', '.delbtn', function () {
        $(this).closest('tr').remove();
        if ($("#lastYear tr").length < 4){
            $('.delbtn').hide();
        }
    });



cloned.insertAfter(thisRow).find('input:text').val('');
        if ($("#lastYear tr").length < 2){
            cloned.find('.delbtn').hide();
        }

注意：但是如果删除“添加其他活动”按钮的“最后一行”，则无法添加任何其他行。你没有提到用户可以删除最后一个或没有，所以我没有做任何事情。让我知道你的意见。

根据可见行的数量，在表上有条件地显示按钮

2 个答案: