Search / Filter multiple tables in all columns using W3.CSS Javascript

Question

Search / Filter multiple tables in all columns using W3.CSS Javascript

Background: I am working 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 via Spyder for Python and the rest in Sublime.

We connect to a SQLite database for mapped tables, which "sellers" or the user can search through a javascript loop through the tables displayed on every other page.

My question is: 1. When doing a data search, I can only sort the left column. How can I change the javascript so that I can search / filter across multiple columns?

Note: if anyone is interested in lending a hand to a few more ideas I have for this project, please let me know if you would like to hear what I am trying to accomplish.

thank

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

Link to the homepage template I'm using: https://www.w3schools.com/w3css/tryw3css_templates_social.htm

Code for the Clients / Table page

<!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 %}