用于显示整个匹配单元格的脚本

Question

我正在尝试创建一个HTML页面，其中包含一些表格以及用于在该表格内搜索文本的一些文本和脚本。就像当我按下它时，它会突出显示所有文本。 该脚本成功找到表中的匹配文本但我在这个脚本中有一个问题，就像它只显示表中的开始和最后一个匹配单词而不是显示整个。附加的是我的脚本和表格。

var cells = document.querySelectorAll("#myTable td"); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function(){ 
 

 
    for(var i = 0; i < cells.length; i++){ 
 
    if(cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) == 0){  
 
     cells.forEach(function(element){ 
 
      element.style.display = "none"; 
 
     }); 
 
     cells[i].style.background = "yellow"; 
 
     cells[i].style.display = "table-cell"; 
 
\t \t continue; 
 
\t \t cells[i].hide(); 
 
    } else { 
 
     cells[i].style.background = "white"; 
 
     cells.forEach(function(element){ 
 
      if(cells[i] !== element){ 
 
      element.style.display = "table-cell"; 
 
\t \t \t cells[i].show(); 
 
      } 
 
     }); 
 
    }  
 
    } 
 

 
});

<input id='myInput' type='text'> 
 

 
<table id='myTable'> 
 
    <tr> 
 
     <td>A</td> 
 
     <td>AA</td> 
 
     <td>AAA</td> 
 
    </tr> 
 
    <tr> 
 
     <td>B</td> 
 
     <td>BB</td> 
 
    <td>BBB</td> 
 
    </tr> 
 
    <tr> 
 
     <td>C</td> 
 
     <td>CC</td> 
 
    <td>CCC</td> 
 
    </tr> 
 
</table>

我不明白自己做错了什么我做的，什么是我的脚本失踪。请看看它，让我错过或错误。 在此先感谢

Answer 1

如果你运行你的片断，你会看到一个错误：

Uncaught TypeError: cells[i].show is not a function

这是因为show()是一个jQuery方法，并且不可在一个DOMElement。在这种情况下，您需要使用.style.display = 'table-cell'。

类似地，hide()也是一种jQuery方法，虽然在您之前调用continue;之前没有显示错误，所以它不会被打中。该呼叫应该被删除（连同冗余使用continue）或更改为.style.display = 'none';。

var cells = [].slice.call(document.querySelectorAll("#myTable td")); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function() { 
 
    cells.forEach(function(cell) { 
 
    if (!search.value.trim()) { 
 
     cell.style.background = "white"; 
 
     cell.style.display = 'table-cell'; 
 
    } else if (cell.textContent.toLowerCase().indexOf(search.value.toLowerCase()) == 0) { 
 
     cell.style.background = 'yellow'; 
 
     cell.style.display = "table-cell"; 
 
    } else { 
 
     cell.style.background = "white"; 
 
     cell.style.display = 'none'; 
 
    } 
 
    }); 
 
});

<input id='myInput' type='text'> 
 

 
<table id='myTable'> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>AA</td> 
 
    <td>AAA</td> 
 
    </tr> 
 
    <tr> 
 
    <td>B</td> 
 
    <td>BB</td> 
 
    <td>BBB</td> 
 
    </tr> 
 
    <tr> 
 
    <td>C</td> 
 
    <td>CC</td> 
 
    <td>CCC</td> 
 
    </tr> 
 
</table>

最后请注意，检查indexOf() == 0只有字符串的开头匹配。如果那是你的意图，那很好。如果您想检查的字符串匹配的任何部分，使用!= -1