Count visible rows from a specific class in html table using Javascript

[torpid remnant]

How to count total visible rows from a specific class such as ".CountTwo" in html table using JavaScript, I have a code below that filters table rows while typing.

        function myFunction() {

            // Declare variables

       

            if (document.getElementById('name').checked) {

                var input, filter, table, tr, td, i, txtValue;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("MyTable");
                tr = table.getElementsByTagName("tr");


                count = [];
                rowsFound = [];
                // Loop through all table rows, and hide those who don't match the search query
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[1]; // change number to any other number to target column for table search
                    if (td) {
                        txtValue = td.textContent || td.innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                            rowsFound.push(1)
                            count.push(document.querySelectorAll('.CountTwo'))
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }


                document.getElementById("archieve").innerHTML = count.length;

                document.getElementById("statistic").innerHTML = rowsFound.length;

            }
}

Im having issues here

count.push(document.querySelectorAll('.CountTwo'))

I managed to count the total visible rows using the rowsFound but i can't grasp how to do that with a class ".CountTwo"

[terse raven]

• see #faq to learn JS
• never use var and declare your variables in the correct scope
• never use innerHTML
• use semicolons consistently (you should always use them, but if you're not going to at least always don't use them).
• why on earth would you push the node list to the count array? if you want to count results from a completely separate selector, loop through it exactly like you did with the trs.

FYI .filter() would shorten this code considerably.

[torpid remnant]

Can you demonstrate?

[terse raven]

actually I'm wrong, for..of would be better since you have a side-effect

let rowsFound = 0;
const rows = table.querySelectorAll('tr');
for (const row of rows) {
  const val = row.querySelectorAll('td')[1].textContent;
  if (val.toUpperCase().includes(filter)) {
    rowsFound++;
  } else {
    row.style.display = 'none';
  }
}
document.querySelector('#archieve').textContent = rowsFound;

[torpid remnant]

do i add this loop under my loop?

[terse raven]

no. that replaces your code. read it and understand it.

[torpid remnant]

okay ill try

[terse raven]

screenshots of code are terrible

[torpid remnant]

yeah one moment

[terse raven]

what exactly are you wanting to do with .CountTwo? is that a different column? what are they and how do they relate to the first loop?

[torpid remnant]

.CountTwo basically is a class that is inside an <a> tag element, I want to count how many visible .CountTwo that are currently on the screen while typing on the input bar to filter HTML table

[terse raven]

hopefully by "currently on the screen" you just mean on the current page. none of your code is checking to see if elements are visible.

you want the count of .CountTwo to be added to the row count or a separate number?

[torpid remnant]

seperate number

I filter the html table and results appear in the page, some of those results has the .CountTwo

[terse raven]

ooh

so you want the anchor count after you hide rows (not counting hidden rows)

[torpid remnant]

example

you see column1?

Link

these links have a class called "CountTwo"

i want to see a number displayed in an inner HTML

to tell me how many count

while filtering*

like statistic number

[terse raven]

let rowsFound = 0;
const rows = table.querySelectorAll('tr');
for (const row of rows) {
  const val = row.querySelectorAll('td')[1].textContent;
  if (val.toUpperCase().includes(filter)) {
    rowsFound++;
  } else {
    row.style.display = 'none';
  }
}
document.querySelector('#archieve').textContent = rowsFound;

const anchorsFound = [...document.querySelectorAll('.CountTwo')].filter(ele => ele.parentElement.style.display !== 'none').length;
document.querySelector('#somethingElse').textContent = anchorsFound;

something like that

suppose it'd be possible within the first loop, too

[torpid remnant]

how?

[terse raven]

let rowsFound = 0;
let anchorsFound = 0;
const rows = table.querySelectorAll('tr');
for (const row of rows) {
  const val = row.querySelectorAll('td')[1].textContent;
  if (val.toUpperCase().includes(filter)) {
    anchorsFound += row.querySelectorAll('.CountTwo').length;
    rowsFound++;
  } else {
    row.style.display = 'none';
  }
}
document.querySelector('#archieve').textContent = rowsFound;
document.querySelector('#somethingElse').textContent = anchorsFound;

[torpid remnant]

Worked !!!!