Question

JSFiddle here

在以下SSCCE中，在click的{{1}}侦听器中，有一个button#remove语句。它之前的陈述计算alert("numberOfRows:" + numberOfRows); //check*****************。此号码始终似乎为numberOfRows。问题是关于它。

请运行此代码。单击0按钮一次或多次。每次单击都会添加橙色边框表。然后点击Add TextField按钮，您将获得Remove TextField。问题是，无论实际存在多少行，这都会始终显示alert为numberOfRows。

问题是为什么？我该如何解决这个问题？

$(document).on("click", "button.remove", function() {
  event.preventDefault();

  var currentRow = $(this).parent().parent().parent().parent().parent().parent();
  currentRow.remove();


  //update numberOfRows variable
  var parentTable = $(this).parent().parent().parent().parent().parent().parent().parent().parent();

  var numberOfRows = parentTable.children('tbody').children('tr').length;

  /*****************************************/
  /*****************************************/
  /*****************************************/
  alert("numberOfRows:" + numberOfRows); //check*****************
  /*****************************************/
  /*****************************************/
  /*****************************************/


  if (!(numberOfRows > 1)) {
    $(".remove").hide();
  }
});










$(document).on("click", "button.add", function() {
  event.preventDefault();

  var parentTable = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
  var lastTableRow = parentTable.children('tbody').children('tr:last');

  //Adding the new row
  parentTable.children('tbody').append(lastTableRow.clone());

  //Reset lastRow variable 
  lastTableRow = parentTable.children('tbody').children('tr:last');
  //Reset the fields
  lastTableRow.find('table tbody tr td input').each(function() {
    $(this).val('');
  });


  //update numberOfRows variable
  var numberOfRows = parentTable.children('tbody').children('tr').length;
  alert("numberOfRows:" + numberOfRows); //check


  if (!(numberOfRows > 1)) {
    $(".remove").hide();
  } else {
    $(".remove").show();
  }

});

#outer-table {
  padding: 20px;
  border: 3px solid pink;
}
#inner-table {
  border: 3px solid orange;
}
.remove {
  display: none;
}

Answer 1

首先，使用.closest( "table" )获取父表行.closest( "tr" )。

如果你必须确实有嵌套表格，那么你仍然可以使用.closest( "table" ).parents( "table" );，但这应该是一个严重的危险信号。

最后，它无法正常工作的原因是因为您要从DOM中删除删除点击处理程序（按钮）的上下文：

currentRow.remove();

然后立即尝试使用以下方法导航DOM树

var parentTable = $(this).parent()[... snip ... ].parent();

但是，$( this ).parent()...已不存在，因为您已将其删除。

在这种情况下，.length 应为0，因为您的DOM导航不会返回任何内容。

如果首先获取父表，然后删除该行，它应该可以工作。

Answer 2

这样的东西应该是什么样的

$('.outer-table').on("click", ".add", function(event) {
    event.preventDefault();

    var row = $(this).closest('.inner-table').closest('tr'),
        rows = row.closest('tbody').children('tr').length + 1;

    row.after(row.clone());

    alert("numberOfRows:" + rows);

    $(".remove").toggle(rows > 1);
});

$('.outer-table').on("click", ".remove", function(event) {
    event.preventDefault();

    var row = $(this).closest('.inner-table').closest('tr'),
        rows = row.closest('tbody').children('tr').length - 1;

    row.remove();

    alert("numberOfRows:" + rows);

    if (rows < 2) $(".remove").hide();
});

.outer-table {
    padding: 20px;
    border: 3px solid pink;
}

.inner-table {
    border: 3px solid orange;
}

.remove {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="outer-table">
    <tbody>
        <tr>
            <td>
                <table class="inner-table">
                    <tbody>
                        <tr>
                            <td>
                                <p style="display:inline-block">Enter first complaint :</p>
                                <input type="text" />
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>
                                <button class="add">Add Textfield</button>
                                <button class="remove">Remove Textfield</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

JQuery`length`属性不能正常工作。为什么？

2 个答案: