title: Javascript dynmaic table from filter
body: <p>I first create the table layout(headers like this):</p>
  
  <pre><code>//DB Connection already established
  $sql = "SHOW COLUMNS FROM fairtrade;";
  $result = $dbConnection-&gt;query($sql);
  
  if($result-&gt;num_rows &gt; 0){
    echo "&lt;th&gt;&amp;ensp;&lt;/th&gt;";
    while($row = $result-&gt;tech_assoc()){
      echo "&lt;th&gt;" . $row['Field'] . "&lt;/th&gt;";
    }
  }
  </code></pre>
  
  <p>This works just fine. And then i fill the table with the data.(It's a huge table, thats why i will only give a short example):</p>
  
  <pre><code>//DB Connection already established
  $sql = "SELECT * FROM fairtrade;";
  $result = $dbConnection-&gt;query($sql);
  
  if($result-&gt;num_rows &gt; 0 ){
    while($row = $result-&gt;fetch_assoc()){
    //use div to be able to resize the cells
      echo "&lt;tr&gt;&lt;td&gt;&lt;div class="tablediv"&gt;" . $row['ID'] . "&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class=tablediv&gt;" . $row['Gender'] . "&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;";
    }
  }
  </code></pre>
  
  <p>So this works just fine aswell. I got a <code>&lt;select id=filter_for&gt;</code> and an <code>&lt;input type=text id=filter_value&gt;</code> and javascript is doing the filtering like this: </p>
  
  <pre><code>function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i,countert,counterval;
  input = document.getElementById("filter_value");
  filter = input.value.toUpperCase();
  table = document.getElementById("fairtrade_table");
  tr = table.getElementsByTagName("tr");
  countert = document.getElementById("filter_for");
  counterval = countert.options[countert.selectedIndex].value;
  
  // Loop through all table rows, and hide those who don't match the search query
   for (i = 0; i &lt; tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[counterval];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
           tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
   }
  }
  </code></pre>
  
  <p>This again, works fine. And depending on the selected value from the <code>&lt;select&gt;</code> it searches the column for that specific value.</p>
  
  <p>So. <strong>How could I change this filter?</strong></p>
  
  <p>I want to be able to search for multiple things. </p>
  
  <p>For example, you have a table with four Columns [ID][GENDER][LASTNAME][NAME]. If someone selected multiple values (for example 2) [GENDER] and [NAME]. The filter searches in both columns. Where the values are separated by ",". So my input would look like this: "Male, George". This should give me all the information about every Male who's name is George. </p>
  
  <p><strong>Second question</strong>. </p>
  
  <p>Is it possible to change this filter or add a new one for the table head? Let's take the example from above, four columns. But now we only want the  as the criteria (because the select has all values from the table head). So the select has the values ID, Gender, Lastname, Name. If I select ID then I only see the ID Column(BUT ALL ROWS), if I select ID and GENDER then both of these columns are shown with all rows. How is this possible? </p>
  
  <p>Anything i found when googling "Javascript table filter" were one value filters.</p>
  
  <p>Thanks for your time.</p>