javascript - 如何统计过滤后显示的表格行数？

Question

如何统计过滤后显示的表格行数？

我尝试运行此脚本，但它显示总行数，而不是当前显示的行数:

function CountRows() {
    var rowCount = 0;
    var table = document.getElementById("filter_table");
    var rows = table.getElementsByTagName("tr")
    for (var i = 0; i < rows.length; i++) {
        if (rows[i].getElementsByTagName("td").length > 0) {
            rowCount++;
        }
    }
    var message = "Showing: " + rowCount;
    alert(message);
}

位置:http://kissbandstree.com/count_rows.js

没有错误消息。

这是过滤器脚本:http://kissbandstree.com/multifilter.js

这是测试页:http://kissbandstree.com/artists2.php

我想显示应用过滤器后显示的行数。

这是相关的 PHP/HTML 部分:

<?php
// Fetch all filenames in the kiss_artists directory
$artists = glob('kiss_artists/*.txt');
?>

<table class="standard">
  <tr>
    <td>
        <?php echo"Items in table: " . count($artists) . ". Showing: XXX. Table is sortable. Artists names are links to simple individual pages. Date is when the entry was modified."; ?>
        <input id="clickMe" type="button" value="clickme" onclick="CountRows();">
    </td>
  </tr>
</table>

Answer 1

您只能检查所有可见行的计数..因为通过查看该页面，您隐藏了与过滤器不相关的行。

我必须从总数中减去一个计数，因为标题行也被计算了。

此外，由于您在该页面中使用 jQuery，这应该是最简单的解决方案

function countRows(){
      let rowCount = $('#filter_table tr:visible').length - 1;
      var message = "Showing: " + rowCount;
      alert(message);
    }