My JavaScript is not working to search within a table

user_17104456 0
Viewed 37

I'm trying to use onkeyup function for a text input and search for Patient Names from column 2. But it it doesn't work at all and doesn't give results in return. I've also added the snippets below.

My table

<table id="table" width="100%">
<tbody>
    <tr class="table-heading">
        
        <td>
            <div>
                <p>ID</p>
            </div>
        </td>
        <td>
            <div>
                <p>Patient name</p>
            </div>
        </td>
        <td>
            <div>
                <p>NIC</p>
            </div>
        </td>
        <td>
            <div>
                <p>Date of Birth</p>
            </div>
        </td>
        <td>
            <div>
                <p>Address.</p>
            </div>
        </td>
        <td>
            <div>
                <p>Username</p>
            </div>
        </td>
        <td>
            <div>
                <p>Status</p>
            </div>
        </td>
    </tr>
    <div class="grid">
        <tr>
            <td>
                <div>
                    <p>1</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Kumar K</p>
                </div>
            </td>
            <td>
                <div>
                    <p>654561</p>
                </div>
            </td>
            <td>
                <div>
                    <p>1995-05-21</p>
                </div>
            </td>
            <td>
                <div>
                    <p>the avenue</p>
                </div>
            </td>
            <td>
                <div>
                    <p>random</p>
                </div>
            </td>
            <td>
                <div>
                    <p>active</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <p>2</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Ravi R</p>
                </div>
            </td>
            <td>
                <div>
                    <p>98741262</p>
                </div>
            </td>
            <td>
                <div>
                    <p>1996-05-22</p>
                </div>
            </td>
            <td>
                <div>
                    <p>the street</p>
                </div>
            </td>
            <td>
                <div>
                    <p>real</p>
                </div>
            </td>
            <td>
                <div>
                    <p>inactive</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <p>3</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Sanjay U</p>
                </div>
            </td>
            <td>
                <div>
                    <p>575305</p>
                </div>
            </td>
            <td>
                <div>
                    <p>1993-05-28</p>
                </div>
            </td>
            <td>
                <div>
                    <p>the house</p>
                </div>
            </td>
            <td>
                <div>
                    <p>normal</p>
                </div>
            </td>
            <td>
                <div>
                    <p>active</p>
                </div>
            </td>
        </tr>
    </div>                     
</tbody>

My input box

<input type="text" name="search" id="search" placeholder="Search here...." >

My JavaScript

document.getElementById("search").onkeyup = function() {
        let filter = document.getElementById('search').value.toUpperCase();

        let table = document.getElementById('table');

        let tr = table.getElementsByTagName('tr');

        for(var i=0; i<tr.length; i++){
            let td = tr[i].getElementsByTagName('td')[1].innerText;

            if(td){
                let textValue = td.textContent || td.innerText;

                if(textValue.toUpperCase().indexOf(filter) > -1){
                    tr[i].style.display = "";
                }
                else{
                    tr[i]style.display = "none";
                }
            }
        }
    }


document.getElementById("search").onkeyup = function() {
            let filter = document.getElementById('search').value.toUpperCase();

            let table = document.getElementById('table');

            let tr = table.getElementsByTagName('tr');

            for(var i=0; i<tr.length; i++){
                let td = tr[i].getElementsByTagName('td')[1].innerText;

                if(td){
                    let textValue = td.textContent || td.innerText;

                    if(textValue.toUpperCase().indexOf(filter) > -1){
                        tr[i].style.display = "";
                    }
                    else{
                        tr[i]style.display = "none";
                    }
                }
            }
        }
<input type="text" name="search" id="search" placeholder="Search here...." >

<table id="table" width="100%">
    <tbody>
        <tr class="table-heading">
            
            <td>
                <div>
                    <p>ID</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Patient name</p>
                </div>
            </td>
            <td>
                <div>
                    <p>NIC</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Date of Birth</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Address.</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Username</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Status</p>
                </div>
            </td>
        </tr>
        <div class="grid">
            <tr>
                <td>
                    <div>
                        <p>1</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>Kumar K</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>654561</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>1995-05-21</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>the avenue</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>random</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>active</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <p>2</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>Ravi R</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>98741262</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>1996-05-22</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>the street</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>real</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>inactive</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <p>3</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>Sanjay U</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>575305</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>1993-05-28</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>the house</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>normal</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>active</p>
                    </div>
                </td>
            </tr>
        </div>                     
    </tbody>
</table>

html javascript
3 Answers

There was a missing dot:

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

And also this piece of code was not right

        let td = tr[i].getElementsByTagName('td')[1].innerText;

        if(td){
            let textValue = td.textContent || td.innerText;

To solve it:

    document.getElementById("search").onkeyup = function() {
    let filter = document.getElementById('search').value.toUpperCase();

    let table = document.getElementById('table');

    let tr = table.getElementsByTagName('tr');

    for(var i=0; i<tr.length; i++){
        let textValue = tr[i].getElementsByTagName('td')[1].innerText;

        if(textValue){
            if(textValue.toUpperCase().indexOf(filter) > -1){
                tr[i].style.display = "";
            }
            else{
                tr[i].style.display = "none";
            }
        }
    }
}
user_41915610

You just had a couple typos. tr[i]style.display is missing a period between tr[i] and style.display and you were setting td to innerText of the table cell which results in a string - you then tried to access textContent or innerText from that string (so removing the initial call to innerText fixes it.

I highly recommend you use a modern IDE such as Visual Studio Code which will automatically flag these types of issues. Also, stepping through the code in a browser debugger will also likely show you where issues arise.

document.getElementById("search").onkeyup = function() {
            let filter = document.getElementById('search').value.toUpperCase();

            let table = document.getElementById('table');

            let tr = table.getElementsByTagName('tr');

            for(var i=0; i<tr.length; i++){
                let td = tr[i].getElementsByTagName('td')[1];

                if(td){
                    let textValue = td.textContent || td.innerText;

                    if(textValue.toUpperCase().indexOf(filter) > -1){
                        tr[i].style.display = "";
                    }
                    else{
                        tr[i].style.display = "none";
                    }
                }
            }
        }
<input type="text" name="search" id="search" placeholder="Search here...." >

<table id="table" width="100%">
    <tbody>
        <tr class="table-heading">
            
            <td>
                <div>
                    <p>ID</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Patient name</p>
                </div>
            </td>
            <td>
                <div>
                    <p>NIC</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Date of Birth</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Address.</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Username</p>
                </div>
            </td>
            <td>
                <div>
                    <p>Status</p>
                </div>
            </td>
        </tr>
        <div class="grid">
            <tr>
                <td>
                    <div>
                        <p>1</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>Kumar K</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>654561</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>1995-05-21</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>the avenue</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>random</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>active</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <p>2</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>Ravi R</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>98741262</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>1996-05-22</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>the street</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>real</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>inactive</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <p>3</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>Sanjay U</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>575305</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>1993-05-28</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>the house</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>normal</p>
                    </div>
                </td>
                <td>
                    <div>
                        <p>active</p>
                    </div>
                </td>
            </tr>
        </div>                     
    </tbody>
</table>

user_16268660

You can do it simpler using table.rows like this:

document.getElementById("search").onkeyup = function () {
  let filter = document.getElementById("search").value.toUpperCase();
  let table = document.getElementById("table");
  for (var i = 0, row; (row = table.rows[i]); i++) {
    if (!row.cells[1].innerHTML.toUpperCase().includes(filter))
      row.style.display = "none";
    else row.style.display = "";
  }
};
user_56600860
Related