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