title: JavaScript Search Table by Index
body: <p>I have a table with multiple columns (for this question I only made two columns) and I want the user to be able to search through a column by the index depending on an option that the user can select. I have working code, but in order to change the search option, I had to copy the function for each input. </p>
  
  <p>How can I search by the index? If a user selects an option like (name), then the javascript function will change the index that it is searching to [0]. if the user selects (location), the function will change the index to [1] and search through that column. </p>
  
  <p>Is this possible? Any help would be appreciated. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const searchName = document.getElementById('searchName');
  const searchLoc = document.getElementById('searchLoc');
  custSelect.addEventListener('click', () =&gt; {
    if (custSelect.value == 'custname') {
      searchName.style.display = 'block';
      searchLoc.style.display = 'none';
    } else {
      searchName.style.display = 'none';
      searchLoc.style.display = 'block';
    }
  });
  
  
  // Search for customer, or search for location, index will change based on option selected.
  function tableSearch(id, index) {
    // Declare variables
    var filter, input, table, tr, td, i;
    input = document.getElementById(id);
    filter = input.value.toUpperCase();
    table = document.getElementById(id);
    tr = table.getElementsByTagName('tr');
  
    // 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")[0]; // index will change based on option selected.
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="custDiv"&gt;
      &lt;div class="addBtns"&gt;
        &lt;input id="searchName" onkeyup="tableSearch('searchName','custList'[0])" type="text" placeholder="search name" /&gt;
        &lt;!-- this searches through the first index or [0] --&gt;
        &lt;input id="searchLoc" onkeyup="tableSearch('searchLoc','custList'[1])" style="display: none;" type="text" placeholder="search location" /&gt;
        &lt;!-- this searches through the second index or [1] --&gt;
        &lt;div id="custSelectDiv" style="width: 175px; height: 35px; max-height: 35px; margin: 0 auto;"&gt;
          &lt;select id="custSelect" style="position: absolute;"&gt;
              &lt;option value="custname"&gt;name&lt;/option&gt; &lt;!-- if user selects this, the corresponding input is displayed, which changes the index to search through --&gt;
              &lt;option value="location"&gt;location&lt;/option&gt; &lt;!-- if user selects this, the corresponding input is displayed, which changes the index to search through --&gt;
            &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;table id="custListTop" contenteditable="false"&gt;
        &lt;tr&gt;
          &lt;td style="border-top-left-radius: 5px;"&gt;Customers&lt;/td&gt;
          &lt;td style="border-top-right-radius: 5px;"&gt;Main Location&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;table id="custList" contenteditable="true"&gt;
        &lt;tr&gt;
          &lt;td&gt;josh&lt;/td&gt;
          &lt;td&gt;hawkins&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;hanna&lt;/td&gt;
          &lt;td&gt;big sandy&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;bonne&lt;/td&gt;
          &lt;td&gt;big sandy&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;thomas&lt;/td&gt;
          &lt;td&gt;big sandy&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
  &lt;script src="test.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>