Question

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

＆＃13;

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";
		continue;
		cells[i].hide();
    } else {
        cells[i].style.background = "white";
        cells.forEach(function(element){
          if(cells[i] !== element){
            element.style.display = "table-cell";
			cells[i].show();
          }
        }); 
    }    
  }

});

＆＃13;

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

＆＃13;

我无法理解我在做什么，我的脚本中缺少什么。请看看它，让我错过或错过。提前致谢

Answer 1

如果您运行代码段，则会看到错误：

未捕获的TypeError：cells [i] .show不是函数

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

同样地，hide()也是一种jQuery方法，虽然在你之前调用continue;时没有显示错误，所以它永远不会被命中。应该删除该调用（以及continue的冗余使用）或更改为.style.display = 'none';。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: