Search/Filter multiple table on all columns using W3.CSS Javascript

Question

Background: I am working for on a class project where we have to create a CRM system for our fictitious companies. For the project we use a combination of Python, HTML, CSS, W3.CSS, Javascript, Flask, Jinja2, Bootstrap through Spyder for the Python and the rest edited in Sublime.

We connect to an SQLite database for the tables that we display, that the "salesmen", or user, can search through using a javascript loop through the tables displayed on each different page.

My Question: 1.When performing a search on the data, I am only able to sort through the left most column. How can I alter the javascript so that I can perform a search/filter through multiple columns?

note: if anyone is interested in lending a hand on a few more ideas I have for this project, please let me know if your willing to hear out what I am trying to accomplish.

Thank you

Link to w3schools search/filter code: https://www.w3schools.com/howto/howto_js_filter_table.asp

Link to home page template I am using: https://www.w3schools.com/w3css/tryw3css_templates_social.htm

Code for the "Clients" Page/Table

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
<title>Clients</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

</style>
</head>
<body>
<br>
<br>
<br>

<table id="Clients" class="w3-table-all">
<!-- Search Function W3 -->
<div class="container">
  <div class="col-lg-6 col-lg-offset-3 text-right">
     <input align="right" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Names..">
      </div>
</div>
<caption><h1 style="color:black;"align="center">Clients</h1></caption>
            <tr>
                <th>Name</th>
                <th>Representative ID</th>
                <th>Carrier ID</th>
                <th>Email</th>
                <th>Phone Number</th>
                <th>Company ID</th>

            </tr>


  {% for item in CRM %}



   <tr>
     <td>{{ item[1] }}</td>
     <td>{{ item[2] }}</td>
     <td>{{ item[3] }}</td>
     <td>{{ item[4] }}</td>
     <td>{{ item[5] }}</td>
     <td>{{ item[6] }}</td>

    </tr>

  {% endfor %}
</table>
<!-- Javascript for Search Function -->
<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("Clients");
  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];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

</body>
</html>



{% endblock %}

Please could you post your compiled HTML and CSS (in particular the table) so we can recreate your issue. It's also worth noting that `div` is not a valid child of the `table` element and could potentially cause issues. — Hidden Hobbes, May 10 '17 at 08:21

Romanov · Answer 1 · 2020-06-17T08:18:54.690

I have your solution for the script problem:

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("Clients");
  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++) {
    td0 = tr[i].getElementsByTagName("td")[0];
    td1 = tr[i].getElementsByTagName("td")[1];
    td2 = tr[i].getElementsByTagName("td")[2];
    // and so on...
    if (td) {
      if (td0.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
      }
      }
    } 
  }
}

You just have to follow this scheme. Hope my answer was helpfull.
[EDIT]
I'll explain what the script does:
Basically, you are settling some conditions with IndexOf() method that returns -1 if there is no occurence between the input and an element in the list. So, for exemple, if this:

td0.innerHTML.toUpperCase().indexOf(filter) returns -1, it will mean that there will be no occurence between the input and the text present in td0. So, you will need to move to the next condition that will repeat the same thing (with another word). And you'll do that until you have travelled all you tables (td0, td1, td2...).
Under each condition, there is written tr[i].style.display = "", it means that we are not hiding the row if the condition validates, but if there is no validated condition at the end, under the last else {} condition, you will write tr[i].style.display = "none", which will hide the row from the table.

Thank you for helping out StackOverflow. Not sure if you noticed that the question was for a class project and was asked 3 years ago. Doubt the OP is still taking that class. If you do want your answer to help people in the future that may have the same question, perhaps expand your answer with an explanation of what your script is doing. Keep up the good work. — MilkyTech, Jun 16 '20 at 15:01

Search/Filter multiple table on all columns using W3.CSS Javascript

1 Answers1