Как подсчитать, сколько строк таблицы отображается после фильтрации?

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);
    }

Answer 2

Вы должны иметь возможность пропустить скрытые строки, добавив проверку на видимость в ваш цикл:

for (var i = 0; i < rows.length; i++) {
    if (rows[i].style.display == 'none') continue;
    if (rows[i].getElementsByTagName("td").length > 0) {
        rowCount++;
    }
}
// for the header row
rowCount--;

Так как есть строка заголовка, вам нужно вычесть ее из числа.