JavaScript 按索引搜索 Table

Question

我有一个包含多列的 table（对于这个问题我只制作了两列）并且我希望用户能够根据用户可以选择的选项通过索引搜索列select。我有工作代码，但为了更改搜索选项，我必须为每个输入复制函数。

如何按索引搜索？如果用户 select 有一个像 (name) 这样的选项，那么 javascript 函数会将它正在搜索的索引更改为 [0]。如果用户 selects（位置），该函数会将索引更改为 [1] 并搜索该列。

这可能吗？任何帮助，将不胜感激。

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>

Answer 1

我认为这是进行该研究的两种更简单的方法：

使用对象数组搜索您需要的内容，在每次研究时重新组织它，并在每次 table 更改时重新制作您的 html table。

或者使用dataTable，这是一个非常简单的工具来排序table。

Answer 2

这应该能让您走上正轨

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>

JavaScript 按索引搜索 Table

JavaScript Search Table by Index

html

javascript

html-table

indexof