Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Counting filtered rows of a table

how can i count the filtered rows of a table. The table has many rows. it is just normal containing many rows. With the help of following Javascript code. I filter data, by way of typing into input text, pasting the required value and also with a click to import the value from OptionList; and all these three ways are functioning perfectly. If it is possible to amend this code so as to get the count of filtered rows out of total rows, i.e. "Found….. rows out of……rows. at the top of table. I am totally a new user of javascript without any previous knowledge so sorry for that. The code is :



    const trs = document.getElementById("myTable").getElementsByTagName("tr");
document.getElementById("search").addEventListener("input", filterRows);
document.getElementById("search").addEventListener("change", filterRows);
document.getElementById("search").addEventListener("click", filterRows);

function filterRows(e) {
    const query = e.target.value.toLowerCase();
    for (const tr of trs) {
        
tr.style.display = tr.innerText.toLowerCase().includes(query) ? "" : "none";
    }
}
Tags:

2

Answers


  1. 0

    When you query the DOM with something like getElementsByTagName(), it returns a collection of elements. This collection has the length property, so if you wanted to know how many rows you had in total, you could just use trs.length. Though you still need to get the count that’s visible after filtering.

    I would do something different in your code. I would add a class for filtered to your CSS:

    .filtered {
  display: none
}

    Then, in your loop:

    function filterRows(e) {
  const query = e.target.value.toLowerCase();
  for (const tr of trs) {
    tr.classList.toggle('filtered', !tr.innerText.toLowerCase().includes(query));
  }
}

    That will add/remove the filtered class as appropriate.

    Then, if you want the count…

    document.querySelector('#myTable tr:not(.filtered)').length

    One final note… I’d recommend avoiding the usage of IDs. They clutter up the global namespace and can cause conflicts when you add code later on.

    Login or Signup to reply.
  2. 0

    This code filters a value from input to your table and shows rows and count.

    let tableHNDL=document.querySelector("#myTable");
document.getElementById("searchValue").addEventListener("input", filterRows);
document.getElementById("selectOptionList").addEventListener("change", filterRows);
document.getElementById("searchBTN").addEventListener("click", filterRows);

function filterRows(e) {
    let searchFor=e.target.value.toLowerCase(); // gets the elements value. selectOption & textbox & button.
    //let searchFor=document.querySelector("#searchValue").value;
    let rowsFound=0;

for(let a=0;a<tableHNDL.rows.length;a++){
for(let b=0;b<tableHNDL.rows[a].cells.length;b++){
if(tableHNDL.rows[a].cells[b].innerHTML.toLowerCase()==searchFor)
{tableHNDL.rows[a].style.display="block";rowsFound++;break;}
else
{tableHNDL.rows[a].style.display="none";}
}
}

let rs=document.querySelector("#resultCount");
if(rowsFound){rs.innerHTML=rowsFound+" rows found.";}else{rs.innerHTML="Nothing found.";}

}
    <table border="1" id="myTable">
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
<tr><td>a3</td><td>b4</td><td>c3</td></tr>
<tr><td>a4</td><td>b4</td><td>c4</td></tr>
</table>

<select id="selectOptionList">
<option value="c4">c4</option>
<option>a2</option>
<option>b1</option>
<option>c3</option>
</select>

<input id="searchValue" type="text"/>

<input id="searchBTN" type="button" value="a2"/>

<div id="resultCount"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search