Javascript Search on HTML Table based on multiple columns

I am trying to perform search on 4 columns and expecting results to have union of the results.

For example : if keyword 'Test' is in two column in two different rows then both rows should be displayed.

But currently I am able to search only on one column. Is there a way to search on multiple columns. My search function is below. Any suggestions are appreciated thank you.

function MySearch() {
        // Declare variables
        var input, filter, table, tr, td, td1,td2,td3, i;
        input = document.getElementById("TxtSearch");
        filter = input.value.toUpperCase();
        table = document.getElementById("TblSearchData");
        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")[0];
            td1 = tr[i].getElementsByTagName("td")[1];
            td2 = tr[i].getElementsByTagName("td")[2];
            td3 = tr[i].getElementsByTagName("td")[3];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
             if (td1) {
                if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
            else if (td2) {
                if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
            else if (td3) {
                if (td3.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

2 answers

  • answered 2018-12-05 20:33 Sk.

    Bassicaly you have the idea..only i tweaked... the desicion to show or not... after perform the search in all "td"...and no at the firts occurs of them...because one td cancel the other...and not desiree effect.... try the code bellow

    sorry for my english

    function MySearch() {
                // Declare variables
                var input, filter, table, tr, td, td1,td2,td3, i;
                input = document.getElementById("TxtSearch");
                filter = input.value.toUpperCase();
                table = document.getElementById("TblSearchData");
                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")[0];
                    td1 = tr[i].getElementsByTagName("td")[1];
                    td2 = tr[i].getElementsByTagName("td")[2];
                    td3 = tr[i].getElementsByTagName("td")[3];
    
                    is_present = 0;
    
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            is_present = 1
                        }
                    }
                     if (td1) {
                        if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            is_present = 1
                        }
                    }
                    else if (td2) {
                        if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
                             is_present = 1
                        }
                    }
                    else if (td3) {
                        if (td3.innerHTML.toUpperCase().indexOf(filter) > -1) {
                             is_present = 1
                        }
                    }
    
    
                    if (is_present == 1) {
                        tr[i].style.display = "";
    
                        } else {
                            tr[i].style.display = "none";
                    }
    
    
                }
            }
    

  • answered 2018-12-05 22:46 Mark Schultheiss

    Here is a partial jQuery version, should work even if you add rows since it starts from the top each time. I added a clear button just to show how to do that.

    IF you wish to match ALL terms entered you would need to modify slightly like for "bunny fish" for example to only return 1 row.

    • Supports multiple terms (inclusive): try "red orange" or "black bunny"
    • Supports an empty search (shows all)
    • Does not support partial words.
    • Supports adding new columns.

    $('#searchem').on('click', function() {
      let searchText = $('#TxtSearch').val();
      let searchTerms = searchText != ""? searchText.split(" "): [];
      MySearch(searchTerms);
    });
    $('#clearem').on('click', function() {
      let searchText = $('#TxtSearch');
      searchText.val("");
      let searchTerms = [];
      MySearch(searchTerms);
    });
    
    function MySearch(terms) {
      let searchTable = $('#TblSearchData');
      let searchRows = searchTable.find('tbody').find('tr');
      let searchValues = searchRows.find('td');
      // console.log("terms:",terms.length);
      searchValues.closest('tr').toggle(!terms.length); //hide em all
      // show ones with matches
      searchValues.filter(function(index, element) {
        let found = false;
        var fieldTerms = $(element).text().split(" ");
        for (let term of fieldTerms) {
          //  console.log("term:", term);
          if (terms.includes(term)) {
            //   console.log("Found:", term);
            found = true;
            break;
          }
        }
        return found;
      }).closest('tr').toggle(true);
      // Declare variables
    }
    td {
      border: solid blue 1px;
    }
    
    .found {
      display: solid red 1px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <input id="TxtSearch" type="text" />
    <button id="searchem" type="button">Search</button><button id="clearem" type="button">Clear</button>
    <table id="TblSearchData">
      <tbody>
        <tr>
          <td>Row 1 blue fish</td>
          <td>feet, what are feet</td>
          <td>reep red</td>
          <td>sad panda</td>
          <td>black panda</td>
          <td>cheese ball</td>
        </tr>
        <tr>
          <td>Row 2 red fish</td>
          <td>white fish</td>
          <td>blue cat</td>
          <td>orange moose</td>
          <td>bunny fish</td>
          <td>tish fish</td>
        </tr>
        <tr>
          <td>Row 3 orange fish</td>
          <td>wax moose</td>
          <td>brown moose</td>
          <td>walter here</td>
          <td>gone tish</td>
          <td>wonder what</td>
        </tr>
        <tr>
          <td>Row 4 one fish</td>
          <td>orange cow</td>
          <td>moose cow with blue feet</td>
          <td>chicken</td>
          <td>chicken egg</td>
          <td>petes dragon</td>
        </tr>
      </tbody>
    </table>