Search Field on multiple indexes in a html table using java-script

Question

I have following Html table in my application

  <table class="table table-striped table-hover table-bordered" id="sample_editable_1">
        <thead>
            <tr>
                <th>Id</th>
                <th>User Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone Number</th>
                <th>Gender</th>

            </tr>
        </thead>
        <tbody>
            @foreach($user as $users)
            <tr>
                <td>{{$users['id']}}</td>
                <td>{{$users['user_name']}}</td>
                <td>{{$users['first_name']}}</td>
                <td>{{$users['last_name']}}</td>
                <td>{{$users['phone_no']}}</td>
                <td>{{$users['gender']}}</td>
                @endforeach
        </tbody>
    </table>

I have wrote following JavaScript for search in this table

  <script>
  function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("sample_editable_1");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[1];
  if (td) {
  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
     }
    }       
  }
}
</script>

This particular code is working for single index like td = tr[i].getElementsByTagName("td")[0] or [1] how can i can make it working for a scenario that whatever user search for table should show every thing which is matching with the input?

Please click the <> snippet editor and replace the template with relevant HTML and a search field — mplungjan
– mplungjan, Commented Mar 13, 2017 at 12:29
you need to grab all the td and throw them in an array/object so you can iterate through them like you have with the tr — Toxide82
– Toxide82, Commented Mar 13, 2017 at 12:30

Jorge Fuentes González · Accepted Answer · 2017-03-13 12:50:36Z

1

The same way as you loop your trs, you should loop your tds:

function myFunction() {
    var input, filter, table, tr, td, i, ii;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("sample_editable_1");
    tr = table.querySelectorAll("tbody tr");
    for (i = 0; i < tr.length; i++) {
        var tds = tr[i].getElementsByTagName("td");
        var found = false;
        for (ii = 0; ii < tds.length && !found; ii++) {
            if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
                found = true;
                break;
            }
        }
        tr[i].style.display = found?"":"none";
    }
}

Protips: Keep your indentation clean and textContent fits better in this scenario.

Don't try to search against tr[i].textContent as that will concatenate column contents, so if last_name column has "juan" and phone_no column has "0411", searching for "an04" will return positive. I guess that you don't want this to happen. Is better to search for each column content individually.

edited Mar 13, 2017 at 12:50

answered Mar 13, 2017 at 12:32

Jorge Fuentes González

11.9k4 gold badges48 silver badges70 bronze badges

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

5 Comments

Muhammad Sipra Over a year ago

got it . but i am figuring this out that my tr element for heading is vanishing as i search for something. obviously it is annoying for user, He/she will not recognized the output.

Jorge Fuentes González Over a year ago

@user7597883 Oh, updated it. You simply need to select all trs inside tbody.

Muhammad Sipra Over a year ago

after selection of all tr as you guided me , search is not working . When nothing matches with table content only the it shows th with

Jorge Fuentes González Over a year ago

@user7597883 Ops, should have changed the function to querySelectorAll xD. Updated.

Muhammad Sipra Over a year ago

thanks buddy i was new , you guided me like a student .

Collectives™ on Stack Overflow

Search Field on multiple indexes in a html table using java-script

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related