How to search number from html table using javascript?

Question

I am having difficulty searching numbers from the HTML table using javascript. What I want to do, if I enter 500 then the results should be 500 and numbers that are also greater than 500. I checked other StackOverflow questions but it is not answered as I expected. Can anyone help me, please?

function myFunction(){
   let filter = document.getElementById('myInput').value;
   let myTable = document.getElementById('myTable');
   let tr = myTable.getElementsByTagName('tr');
   for(var i=0; i<tr.length; i++)
   {
     let td = tr[i].getElementsByTagName('td')[0];
     if(td)
     {
        let textValue = td.textContent || td.innerHTML;
        if(textValue >= filter  )
        {

          tr[i].style.display = "";

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

        }
     }
   }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Number</th>
    <th style="width:40%;">Alphabats Code</th>
  </tr>
  <tr>
    <td>500</td>
    <td>ANAA</td>
  </tr>
  <tr>
    <td>520</td>
    <td>MNAAA</td>
  </tr>
  <tr>
    <td>400</td>
    <td>INNA</td>
  </tr>
  <tr>
    <td>200</td>
    <td>OISSS</td>
  </tr>
  <tr>
    <td>500</td>
    <td>QIIWS</td>
  </tr>
</table>

ProDec · Accepted Answer · 2021-12-04 07:53:14Z

2

A small change to your code

if(+textValue >= +filter  )

Compare values as number instead of strings

function myFunction(){

   let filter = document.getElementById('myInput').value;
   let myTable = document.getElementById('myTable');
   let tr = myTable.getElementsByTagName('tr');
   for(var i=0; i<tr.length; i++)
   {
     let td = tr[i].getElementsByTagName('td')[0];
     if(td)
     {
       let textValue = td.textContent || td.innerHTML;
      if(+textValue >= +filter  )
      {

        tr[i].style.display = "";

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

     }

   }


}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Number</th>
    <th style="width:40%;">Alphabats Code</th>
  </tr>
  <tr>
    <td>500</td>
    <td>ANAA</td>
  </tr>
  <tr>
    <td>520</td>
    <td>MNAAA</td>
  </tr>
  <tr>
    <td>400</td>
    <td>INNA</td>
  </tr>
  <tr>
    <td>200</td>
    <td>OISSS</td>
  </tr>
  <tr>
    <td>500</td>
    <td>QIIWS</td>
  </tr>

</table>

answered Dec 4, 2021 at 7:53

ProDec

5,4001 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3718511 Over a year ago

Thanks, ProGu, Can you please tell me what plus sign do here +textValue >= +filter d?

ProDec Over a year ago

@user3718511 unary plus refer to MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

user3718511 Over a year ago

Great. Thank you..

Collectives™ on Stack Overflow

How to search number from html table using javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related