Question

我正在尝试在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>

Answer 1

您可以尝试以下方法：

'domain_database_4'

您可以直接遍历DOM元素。我希望这种解决方案是可以理解的。我试图使它尽可能简单。

Answer 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);

Answer 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..">

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

3 个答案: