如何在表格中实现 JavaScript 搜索过滤功能答案

【问题标题】：How to implement a JavaScript search filter function in a table如何在表格中实现 JavaScript 搜索过滤功能
【发布时间】：2019-05-10 05:26:01
【问题描述】：

我正在尝试在 JavaScript 中为 HTML 表格组装搜索/过滤功能。 W3Schools 中给出的示例允许用户在给定行的第一个单元格中输入项目，从而显示目标单元格和与该单元格关联的整行，同时过滤掉所有其他行。在下面的示例中，输入“德国”会过滤掉除“德国、奥地利、白俄罗斯、匈牙利”之外的所有内容。但是，我想将过滤功能扩展到针对特定单元格。如果我输入第二列单元格，例如“Austria”，那么我希望该函数过滤掉除“Austria”单元格之外的所有其他行和单元格。我应该如何配置表和函数来做到这一点？

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable td {
  text-align: center;
  padding: 12px;
  border: 1px solid black;
}

<h2>Countries</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for countries..">

<table id="myTable">
  <tr>
    <td>Germany</td>
    <td>Austria</td>
    <td>Belarus</td>
    <td>Hungary</td>
  </tr>
  <tr>
    <td>France</td>
    <td>Morocco</td>
    <td>Mali</td>
    <td>South Africa</td>
  </tr>
  <tr>
    <td>Russia</td>
    <td>Belgium</td>
    <td>Tanzania</td>
    <td>Brunei</td>
  </tr>
  <tr>
    <td>Argentina</td>
    <td>Ireland</td>
    <td>Ghana</td>
    <td>Indonesia</td>
  </tr>
</table>

【问题讨论】：

标签： javascript html css filter html-table

【解决方案1】：

你可以试试这个：

function myFunction() {
    var input = document.getElementById('myInput').value;
    for(var i = 0; i < tds.length; i++) {
        var that = tds[i];
        if (that.innerText.toUpperCase().indexOf(input.toUpperCase()) > -1) {
            that.style.display = 'table-cell';
        } else {
            that.style.display = 'none';
        }
    }
}

您可以直接迭代 DOM 元素。我希望这个解决方案是可以理解的。我尽量保持简单。

【讨论】：

友情提醒：var 现在通常被认为是不好的做法，尤其是在 for 循环中。 let 是首选。 wesbos.com/for-of-es6 因为它是块作用域的。

【解决方案2】：

您可以添加此代码以获取每个条目的输入值，并在检查每行第一列的值的同时对表进行迭代。我不知道你在这背后到底想做什么。

var element = document.getElementById('myInput');

element.addEventListener("keyup", function (evt){
  var currentInputValue = this.value;
  var table = document.getElementById('myTable');
  var trs = table.getElementsByTagName("tr");

  for(let i = 0; i < trs.length; i++){
    //I just print value but add the wanted test like levenshtein algorithm to match with the closer value or whatever
    alert(trs[i].getElementsByTagName("td")[0].innerText + " " + currentInputValue);
  }
}, false);

【讨论】：

友情提醒：var 现在通常被认为是不好的做法，尤其是在 for 循环中。 let 是首选。 wesbos.com/for-of-es6 因为它是块作用域的。

【解决方案3】：

这可行，但是，您还应该考虑adding a debounce() function。

const myInput = document.getElementById('myInput');
const table = document.getElementById('myTable');
const cells = table.getElementsByTagName('td');
const cellArr = [...cells];

myFunction = (val) => {
 cellArr.forEach(c => {
        c.style.display = 'none';

        if (c.innerText.toLowerCase() === val.toLowerCase()) {
            c.style.display = 'table-cell';
        }
    })
};

您还需要在 html 中传递值：

<input type="text" 
       id="myInput" 
       onkeyup="myFunction(this.value)" 
       placeholder="Search for countries..">

【讨论】：