Question

我的桌子上有一个搜索功能，它只搜索确切的关键字。它不会显示未正确大写的数据。如何使其不区分大小写，以便即使输入所有小写单词，我也可以显示这些数据？顺便说一句，我使用的是ESLINT规则。这是我的javascript代码：

myFunction () {
  var searchText = document.getElementById('searchTerm').value
  var targetTable = document.getElementById('myTable')
  var targetTableColCount

  for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
    var rowData = ''

    if (rowIndex === 0) {
      targetTableColCount = targetTable.rows.item(rowIndex).cells.length
      continue // do not execute further code for header row.
    }

    for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
      rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent
    }


    if (rowData.indexOf(searchText) === -1) {
      targetTable.rows.item(rowIndex).style.display = 'none'
    } else {
      targetTable.rows.item(rowIndex).style.display = 'table-row'
    }
  }
}

Answer 1

在我看来，你做的工作超出了必要的范围。如果打算显示具有搜索文本的行，则使用行的 textContent 而不是连接所有单元格值，并将显示设置为“none”或“”，因此element采用默认或继承的显示，无需编程。 E.g。

function doSearch() {
  var searchText = document.getElementById('i0').value.toLowerCase();
  var table = document.getElementById('t0');
  var row, rows = table.rows;
  // Skip first row
  for (var i=1, iLen=rows.length; i<iLen; i++) {
    row = rows[i];
    row.style.display = row.textContent.toLowerCase().indexOf(searchText) == -1? 'none' : '';    
  }
}

<table id="t0">
  <tr><th>Index<th>name
  <tr><td>0<td>Foo
  <tr><td>1<td>Bar
</table>
Search text:<input id="i0">
<button onclick="doSearch()">Do search</button>

Answer 2

这部分：

    if (rowData.indexOf(searchText) === -1) {
      targetTable.rows.item(rowIndex).style.display = 'none'
    } else {
      targetTable.rows.item(rowIndex).style.display = 'table-row'
    }

让我们改为：

    if (isInsideInsensitive(rowData,searchText)) {
      targetTable.rows.item(rowIndex).style.display = 'none'
    } else {
      targetTable.rows.item(rowIndex).style.display = 'table-row'
    }

附加功能：

function isInsideInsensitive(a, b){
     return a.toLowerCase().indexOf(b.toLowerCase()) != -1;
}

查看 isInsideInsensitive 功能

Answer 3

您可以使用toLowerCase字符串方法。

if (rowData.toLowerCase().indexOf(searchText.toLowerCase()) === -1) {
  targetTable.rows.item(rowIndex).style.display = 'none'
} else {
  targetTable.rows.item(rowIndex).style.display = 'table-row'
}

如何使我的表格不敏感的过滤器功能？

3 个答案: