Angel Fragnance Angel Fragnance - 4 days ago 6
HTML Question

Script for displaying whole matching cells

I am trying to create a HTML page that have a table with some text and a script that i used for searching text within that table. Like when i press a it highlight all text with a.
That script is successfully finding matching text within a table But i have a problem in this script like it display only start and last matching word in the table instead of displaying whole. Attached is my script and table.



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

});

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





I can't understand what wrong i am doing and what is missing in my script. Kindly have a look on it and let me what i missed or wrong.
Thanks in advance

Answer

If you run your snippet you'll see an error:

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

This is because show() is a jQuery method and is not available on a DOMElement. You need to use .style.display = 'table-cell' in this case.

Similarly, hide() is a jQuery method too, although that didn't show the error as you call continue; before it, so it will never be hit. That call should be either removed (along with the redundant use of continue) or changed to .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>

Finally note that checking for indexOf() == 0 only matches the start of the string. If that was your intent, great. If you want to check any part of the string for a match, use != -1

Comments