0

我有一个表单，它允许用户通过底行中的按钮添加一个新的表格行，这一切都运行良好，还允许用户删除一个表格行，但总是让一行可见。你可以在这个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++;
});

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

4

2 回答 2

2

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

$('#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++;
 });
于 2013-05-20T07:54:20.987 回答
1

请查看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();
        }

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

于 2013-05-20T08:01:00.110 回答