JavaScript 按索引搜索表答案

【问题标题】：JavaScript Search Table by IndexJavaScript 按索引搜索表
【发布时间】：2017-11-10 19:08:12
【问题描述】：

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

如何按索引进行搜索？如果用户选择（名称）之类的选项，则 javascript 函数会将其正在搜索的索引更改为 [0]。如果用户选择（位置），该函数会将索引更改为 [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>

【问题讨论】：

也许我跑题了，但你为什么不搜索一组对象并重新绘制表格？为什么要在 DOM 中搜索？！这只是用户界面！

标签： javascript html html-table indexof

【解决方案1】：

这应该会让你走上正轨

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>

【讨论】：

我喜欢这个，但我正在尝试使用 'if' 语句 if (col.value == '1') { label.innerHTML = 'Search Name: '; } 但这不会改变 innerHTML

【解决方案2】：

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

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

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

【讨论】：