JavaScript Search Table by Index

问题

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.

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.

Is this possible? Any help would be appreciated.

const searchName = document.getElementById('searchName');
const searchLoc = document.getElementById('searchLoc');
custSelect.addEventListener('click', () => {
  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 < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0]; // index will change based on option selected.
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <div id="custDiv">
    <div class="addBtns">
      <input id="searchName" onkeyup="tableSearch('searchName','custList'[0])" type="text" placeholder="search name" />
      <!-- this searches through the first index or [0] -->
      <input id="searchLoc" onkeyup="tableSearch('searchLoc','custList'[1])" style="display: none;" type="text" placeholder="search location" />
      <!-- this searches through the second index or [1] -->
      <div id="custSelectDiv" style="width: 175px; height: 35px; max-height: 35px; margin: 0 auto;">
        <select id="custSelect" style="position: absolute;">
            <option value="custname">name</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through -->
            <option value="location">location</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through -->
          </select>
      </div>
    </div>
    <table id="custListTop" contenteditable="false">
      <tr>
        <td style="border-top-left-radius: 5px;">Customers</td>
        <td style="border-top-right-radius: 5px;">Main Location</td>
      </tr>
    </table>
    <table id="custList" contenteditable="true">
      <tr>
        <td>josh</td>
        <td>hawkins</td>
      </tr>
      <tr>
        <td>hanna</td>
        <td>big sandy</td>
      </tr>
      <tr>
        <td>bonne</td>
        <td>big sandy</td>
      </tr>
      <tr>
        <td>thomas</td>
        <td>big sandy</td>
      </tr>
    </table>
  </div>

<script src="test.js"></script>
</body>

</html>

回答1:

This should get you on track

var table = document.getElementById('tab'),
  col = document.getElementById('col'),
  val = document.getElementById('val');
col.max = table.rows[0].cells.length - 1;

function search() {
  var regex = new RegExp(val.value || '', 'i');
  for (var i = table.rows.length; i-- > 1;) {
    if (regex.test(table.rows[i].cells[+col.value].innerHTML)) {
      table.rows[i].style.display = 'table-row';
    } else
      table.rows[i].style.display = 'none';
  }
}

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid;
}

<label for="col">Column :</label>
<input type="number" id="col" placeholder="column" onkeyup="search()" min="0" step="1" />
<br>
<label for="val">Find :</label>
<input type="text" id="val" placeholder="cell" onkeyup="search()" />
<table id="tab">
  <tr>
    <th>Customers</th>
    <th>Main Location</th>
  </tr>
  <tr>
    <td>josh</td>
    <td>hawkins</td>
  </tr>
  <tr>
    <td>hanna</td>
    <td>big sandy</td>
  </tr>
  <tr>
    <td>bonne</td>
    <td>big sandy</td>
  </tr>
  <tr>
    <td>thomas</td>
    <td>big sandy</td>
  </tr>
</table>