title: Filter table columns in Vanilla JavaScript with multiple inputs
body: <p>Each column filter, filters its own column, but when trying to filter another column, previous column filters are not remembered.</p>
  
  <p>For example, in the given table: If I search "Basketball" as the sport, then want to narrow my results and search for a specific team in the "Team" column, my results from the "Sport" column are no longer included because the table has reset.</p>
  
  <p>I want to make this usable regardless of the input fields and corresponding columns. So I could use it on multiple tables if need be. That is why I used:</p>
  
  <pre><code>// if data-label matches input name - run
     if(cells[j].getAttribute('data-label').match(inputName)){
         // do stuff
     }     
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Filter Table by Column&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css
      "&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="text" name="Player" placeholder="Player... "&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="Sport" placeholder="Sport..."&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="Team" placeholder="Team..."&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Michael Jordan&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Basketball&lt;/td&gt;
              &lt;td data-label="Team"&gt;Chicago Bulls&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Kobe Bryant&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Basketball&lt;/td&gt;
              &lt;td data-label="Team"&gt;LA Lakers&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Brett Favre&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Football&lt;/td&gt;
              &lt;td data-label="Team"&gt;Greenbay Packers&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Babe Ruth&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Baseball&lt;/td&gt;
              &lt;td data-label="Team"&gt;New York Yankees&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Tom Brady&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Football&lt;/td&gt;
              &lt;td data-label="Team"&gt;New England Patriots&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;LeBron James&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Basketball&lt;/td&gt;
              &lt;td data-label="Team"&gt;LA Lakers&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Steph Curry&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Basketball&lt;/td&gt;
              &lt;td data-label="Team"&gt;Golden State Warriors&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Jose Berrios&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Baseball&lt;/td&gt;
              &lt;td data-label="Team"&gt;Minnesota Twins&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Kirby Pucket&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Baseball&lt;/td&gt;
              &lt;td data-label="Team"&gt;Minnesota Twins&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Zach Parise&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Hockey&lt;/td&gt;
              &lt;td data-label="Team"&gt;Minnesota Wild&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td data-label="Player"&gt;Jason Zucker&lt;/td&gt;
              &lt;td data-label="Sport"&gt;Hockey&lt;/td&gt;
              &lt;td data-label="Team"&gt;Minnesota Wild&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>// Listen to all clicks on the document
  document.addEventListener('keyup', function(e){
  
  // if event doesn't match
  if(!e.target.matches('input[type="text"]')) return;
  
      // otherwise run
      filterTable(e);
  
  }, false);
  
  // filter results
  function filterTable(e){
  
  let inputName = e.target.name;
  let filter = e.target.value.toUpperCase();
  let rows = document.querySelector('table tbody').rows;
  
  // get each row
  for(let i = 0; i &lt; rows.length; i++){
  
      // loop through each cell
      let cells = rows[i].cells;
      for(j = 0; j &lt; cells.length; j++){
  
          let rowContent = cells[j].textContent;
  
          // if data-label matches input name - run
          if(cells[j].getAttribute('data-label').match(inputName)){
  
              // if rowContent inlcudes input - run
              if(rowContent.toUpperCase().includes(filter)){
                  // show row
                  rows[i].style.display = "";
              } else {
                  // hide row
                  rows[i].style.display = "none";
              }
          }
      }
  }
  }
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  
  body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      height: 100%;
      line-height: 1.5;
  }
  
  input {
      padding: 8px;
      border: 0;
      border-bottom: 1px solid #ccc;
      width: 100%;
  }
  
  input:focus {
      outline: none;
  }
  
  table {
      border-collapse: collapse;
      width: 100%;
      margin-top: 20px;
      padding: 8px;
  }
  
  table td {
      padding: 8px;
  }
  
  table tbody tr:hover {
      background: #999;
  }
  </code></pre>