如何使 table 的过滤功能不区分大小写？

Question

我的 table 上有搜索功能，它只搜索确切的关键字。它不会显示未正确大写的数据。我怎样才能让它不区分大小写，这样我就可以显示这些数据，即使我输入了所有小写单词？顺便说一句，我正在使用 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" 或""，因此该元素采用其默认或继承显示，而无需您对其进行编程。例如

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'
}

如何使 table 的过滤功能不区分大小写？

How can I make my filter function for my table case insensitive?

javascript

eslint

vue.js