用於顯示整個匹配單元格的腳本

我正在嘗試創建一個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>

我不明白自己做錯了什麼我做的，什麼是我的腳本失蹤。請看看它，讓我錯過或錯誤。在此先感謝

來源

2016-12-01 Angel Fragnance

[標籤：JAVA]標籤移除你的問題不會出現有任何與Java編程。如果我錯了，請回復給我，並在您的消息中加入'@ hovercraft'。我還添加了[tag：javascript]標籤，因爲這似乎是此處使用的正確語言。 –

如果你運行你的片斷，你會看到一個錯誤：

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

來源

2016-12-01 15:51:14

好吧，我需要做出改變，不僅突出顯示所有匹配的文本，還隱藏其他不匹配的文件，爲什麼我要做這樣的事情。如果你能幫助我，那會很好。 –

我更新了答案爲你 –

謝謝羅裏你解決了我的問題....多數民衆贊成在偉大的答案:) –

用於顯示整個匹配單元格的腳本

回答

相關問題