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

时间:2017-09-26 06:19:03

标签: javascript vue.js eslint

我的桌子上有一个搜索功能,它只搜索确切的关键字。它不会显示未正确大写的数据。如何使其不区分大小写,以便即使输入所有小写单词,我也可以显示这些数据?顺便说一句,我使用的是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'
    }
  }
}

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

这部分:

    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 功能

答案 2 :(得分:1)

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

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