Question 45287 in Html Question posted in
Some basic documentation can be found here.

Count visible rows in html table using Javascript

How to count total visible rows in html table using javascript, I have a code below that filters table rows while typing, I would like to see the number count of visible rows displayed in an innerHTML whole typing automatically

i tried this line of code but i dont see any results in the innerHTML

document.getElementById("statistic").innerHTML = tr[i].length;

FULL CODE


        function myFunction() {

            // Declare variables

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


                // 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 = "";

                             document.getElementById("statistic").innerHTML = tr[i].length;


                        } else {
                            tr[i].style.display = "none";

                        }
                    }
        }
Tags:

2

Answers


  1. 0

    something like that ?

    const
  txt2search   = document.querySelector('#txt-2-search')
, searchResult = document.querySelector('#search-result')
, btSearch     = document.querySelector('#bt-search')
, myTable      = document.querySelector('#my-table')
  ;
btSearch.onclick =()=>
  {
  let 
    counter = 0
  , txt     = txt2search.value.trim()
  , Regtxt  = new RegExp(txt, 'i')
    ;
  myTable.querySelectorAll('tr.noDisplay').forEach(tr => tr.classList.remove('noDisplay'));

  if (txt==='')
    {
    searchResult.textContent = 'nothing to search...';
    return;
    }
  for (let tr of myTable.tBodies[0].rows)
    {
    if (Regtxt.test(tr.innerText )) counter++;
    else                            tr.classList.add('noDisplay');
    } 
  searchResult.textContent = 
    (counter===0) ? 'no result' : `${counter} element(s) found`;
  }
    body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  margin      : 1rem;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : lightslategrey;
  }
th { background: cadetblue;  padding: .3em .6em; }
td { background: whitesmoke; padding: .2em .5em; }
tr *:first-child { text-align: center; font-style: oblique; }
tr * { white-space: nowrap; }
.noDisplay { display: none; }

caption {
  text-align : left;
  padding    : .4rem;
  font-size  : 1.2rem;
  background : #a0dbdd;
  }
#search-result {
  float     : right;
  font-size : .9rem;
  }
    <table id="my-table">
  <caption> 
    Find :
    <input type="text" id="txt-2-search" placeholder="show rows with...?">
    <button id="bt-search"> show rows </button>
    <span id="search-result">.</span>
  </caption>
  <thead>
    <tr>
      <th>#</th><th>First Name</th><th>Last Name</th><th>Address</th><th>Age</th><th>Date of Birth</th><th>Nationality</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>Smith</td><td>Pearse Street</td><td>45</td><td>01/10/1977</td><td>English</td></tr>
    <tr><td>11</td><td>Tim</td><td>Green</td><td>Rosedale Avenue</td><td>23</td><td>17/04/1999</td><td>American</td></tr>
    <tr><td>114</td><td>Tom</td><td>Deane</td><td>Greenwood Road</td><td>42</td><td>27/11/1980</td><td>English</td></tr>
    <tr><td>208</td><td>Anna</td><td>Green</td><td>Rosedale Avenue</td><td>23</td><td>11/06/1999</td><td>Scottish</td></tr>
    <tr><td>259</td><td>Rachel</td><td>Waters</td><td>Station Road</td><td>87</td><td>11/02/1936</td><td>Irish</td></tr>
    <tr><td>1</td><td>George</td><td>Taylor</td><td>Beach Avenue</td><td>52</td><td>30/07/1971</td><td>South African</td></tr>
    <tr><td>1</td><td>Neil</td><td>Smyth</td><td>Beach Road</td><td>6</td><td>15/12/2016</td><td>Australian</td></tr>
    <tr><td>1</td><td>Sarah</td><td>Smyth</td><td>Beach Road</td><td>30</td><td>06/01/1993</td><td>Australian</td></tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0 
     function myFunction() {

            // Declare variables

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


     // Loop through all table rows, and hide those who don't match the search query
     rowsFound = [];
     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)
          } else {
              tr[i].style.display = "none";
          }
   }
}
document.getElementById("statistic").innerHTML = rowsFound.length;
}

myFunction()
    <input id="myInput" onInput="myFunction();">
<table id="MyTable">
<div id="statistic"></div>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>C</td>
<td>C</td>
</tr>

</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search