选择每个表t的tr时出错

Question

我的视图中有多个表格，我希望得到每个tr的{​​{1}}中所有tbody的计数。

我的table看起来像这样：

table

这是我的 jQuery JS：

<table id="Table-One" class="table table-bordered table-hover">
    <thead class="thead-dark">
        <tr>
            <th scope="col" class="text-center">Header One</th>
            <th scope="col" class="text-center">Header Two</th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach(var item in list)
        {
            <tr class="text-center text-dark">
                <td>Testing</td>
                <td>Testing</td>
                <td><a href="#" class="text-danger js-delete" data-pic-id="@Model.Id" data-pic-fk-id="@item.ForeignKeyId">Delete</a></td>
            </tr>
        }
    </tbody>
</table>

这导致 var myTable = $("#Table-One"); var countAllTablesRows = $("table tbody tr").length; console.log(countAllTablesRows); // gives correct # of 8 on page load myTable.on("click", ".js-delete", function() { var link = $(this); var row = $(this).parents("tr"); var countAllTablesRowsInsideMethod = $("table tbody tr").length; console.log(countAllTablesRowsInsideMethod); // gives incorrect # of 13 on click of the link }); ，当我计算时，它包括每个表的13元素中的行。该数字应为 thead 。如何让它不包含8元素中的行？

我认为我没有必要使用thead，因为该查询应该获取所有表格元素，对吗？

更新

在点击链接时记录行后，我正在查看正在生成的额外5行，并且它们都具有如下所示的innerHTML：

.each

我不知道这些是从哪里生成的。

Answer 1

这里的实际问题是由datetimepicker插件生成的隐藏表。 OP通过向所需的tbody元素添加类来解决这个问题，这样就可以识别选择器中的那些元素。

以下内容是一项持续尝试，表明所述代码正在运作。

在我的盒子上工作。当我在Windows 10上的Chrome版本63.0.3239.132（官方构建）（64位）中运行以下代码时，它会记录2，我期望使用此HTML ...在Firefox 58中运行。甚至可以使用Edge。哎呀，它甚至可以在IE11中运行！

＆＃13;

＆＃13;

$(function() {
  var myTable = $("#Table-One");

  var countAllTablesRows = $("table tbody tr").length;
  console.log(countAllTablesRows); // gives correct # of 8

  myTable.on("click",
    ".js-delete",
    function(e) {
      var link = $(this);
      var row = $(this).parents("tr");

      var countAllTablesRowsInsideMethod = $("table tbody tr").length;

      console.log(countAllTablesRowsInsideMethod); // gives incorrect # of 13
      e.preventDefault();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Table-One" class="table table-bordered table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col" class="text-center">
        Header One
      </th>
      <th scope="col" class="text-center">
        Header Two
      </th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr class="text-center text-dark">
      <td>
        Testing
      </td>
      <td>
        Testing
      </td>
      <td><a href="" class="js-delete">Testing</a></td>
    </tr>
  </tbody>
</table>

<table id="Table-Two" class="table table-bordered table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col" class="text-center">
        Header One
      </th>
      <th scope="col" class="text-center">
        Header Two
      </th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr class="text-center text-dark">
      <td>
        Testing
      </td>
      <td>
        Testing
      </td>
      <td>Testing</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

下面的演示中的计数显示3行，如预期的那样。

这表示您在手动计算行数时出错。也许有一些隐藏的。请与浏览器的检查员联系。

当您点击delete按钮时， 会在您的代码中的其他位置发生某些事情，并且您的问题中的信息不足。此外，这是一个非常具体的场景，可能是设计中的人为错误。

var tBodyRowsCount = $("table tbody tr").length;

console.log("Rows in tBody: ", tBodyRowsCount);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
    </tbody>
</table>

最安全使您的选择器更具体：

$(".myTable > tbody > tr") // where ".myTable" is a specific <table> element

这将消除可能位于嵌套表内的任何未知或不需要的表行，这些表本身位于最顶层的表行中。