CODEWITHSUNDEEP
javascripthtml
Aakash Jain
Aakash Jain

Reputation: 87

How to search data in a table in HTML

I have created a table in that table I will display a some that and I will add a search option for the user in that if a user search any data in the table it will display but there has one problem in that in a table I have created 3 rows in that I am only able to search 1st row. 

    <table style="width:100%" id="table">
  <tr>
    <td><a href="#">Song Name</a></td>
    <td>Artists</td>
    <td><a href="#" download><img src="images/download.png" alt="Download" width="30" height="30">
</a></td>
  </tr>
</table>
<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("search");
    filter = input.value.toUpperCase();
    ul = document.getElementById("table");
    li = ul.getElementsByTagName("tr");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("td")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        }
        else {
            li[i].style.display = "none";
        }
    }

}

        </script>

This is my code I am only able to search by Song Name. But I want to search with Artists Name I don't know where I am wrong. and also if the user does not find any data then it will display "Not Found" can anyone help me.

Upvotes: 1

Views: 341

Answers (1)

Apps-n-Add-Ons
Apps-n-Add-Ons

Reputation: 2146

try replacing

 a = li[i].getElementsByTagName("td")[0];

with

 a = li[i].getElementsByTagName("td")[i];

That should allow you to search by Song Name or Artists.

You didn't show where/how you have more than one row, but you will need to add another loop to look through multiple rows.

I will say that, while this method will work for small datasets (i.e., while you are learning/testing), you will quickly find that maintaining this 'Song/Artist' list will be much simpler in a database (depending on how many records you will have in total will help determine what kind of database would be best suited, but some database will be easier to work with than only some 'data').

That should help you along. If you need additional help, you will need to show more code/data (i.e., how you are getting to the issue you are asking for help with).

Happy coding!

Upvotes: 1

Related Questions