Follow-up of search values from first column in html table using JS?

Question

This is my follow-up question of this... See here. I have a jscript(courtesy of hex494D49), searching values from first column.

All I need is, when the values is searching by the user, the table headers will also displayed and if the values is not store. There's a message will display like this "No results found". How to do that?

Here's the JSfiddle file with html

Here's the JScript:

document.getElementById('term').onkeyup = function(){
var term = this.value;    
var column = 0;            
var pattern = new RegExp(term, 'g');  
var table = document.getElementById('dataTable');
var tr = table.getElementsByTagName('TR');
for(var i = 0; i < tr.length; i++){
  var td = tr[i].getElementsByTagName('TD');
  for(var j = 0; j < td.length; j++){
    if(j == column && td[j].innerHTML == term){
      console.log('Found it: ' + td[j].innerHTML);
      tr[i].style.display = 'block';
      return;            
      alert('Found it: ' + td[j].innerHTML);
    }else{
      tr[i].style.display = 'none';
    }
  }    
}
};

Answer 1

This would be the table markup. As you can see, I added thead, tbody and tfoot groups

<!-- search box -->
<input type="text" name="term" id="term" autocomplete = "off" />

<!-- table results -->
<table id="dataTable">
<thead>
    <tr>
        <th>Example No.</th>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th colspan="3"></th>
    </tr>
</tfoot>
<tbody>
<tbody>    
    <tr>
        <td>345678917</td>
        <td>Test 1</td>
        <td>one_test1@gmail.com</td>
    </tr>
    <tr>
        <td>3512376894</td>
        <td>Test 2</td>
        <td>two.test2@hotmail.com</td>
    </tr>
</tbody>
</table>

Default CSS for the markup above. Next step would be merging the following with the rest of your CSS.

table thead {
    display: table-row-group;
}

table tbody {
    display: table-row-group;
}

table tbody tr {
    display: none;
}

And finally the JavaScript snippet using getElementsByTagName() method

// JavaScript
document.getElementById('term').onkeyup = function(){
  var term = this.value;    
  var column = 0;
  var msg = 'No results found!';
  var pattern = new RegExp(term, 'g');  
  var table = document.getElementById('dataTable');
  var tr = table.getElementsByTagName('TR');

  for(var i = 0; i < tr.length; i++){
    var td = tr[i].getElementsByTagName('TD');
    for(var j = 0; j < td.length; j++){
      if(j == column && td[j].innerHTML == term){
        tr[i].style.display = 'table-row';
        table.tFoot.innerHTML = '';  
        return;
      }else{
        tr[i].style.display = 'none';
        table.tFoot.innerHTML = msg;
      }
    }    
  }
};

Working jsFiddle | Version without tfoot jsFiddle

---

The same as above but using rows[] and cells[] collection

HTML

<!-- Search box -->
<input type="text" id="search" autocomplete = "off" />
<!-- Table -->
<table id="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Manufacturer</th>
            <th>Price</th>
            <th>InStock</th>
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>MacBook Air</td>
            <td>Apple</td>
            <td>$456</td>
            <td>85</td>            
        </tr>
        <tr>
            <td>Arc GIS</td>
            <td>ESRI</td>
            <td>$4556</td>
            <td>15</td>                        
        </tr>
        <tr>
            <td>3ds MAX</td>
            <td>Aurodesk</td>
            <td>$6556</td>
            <td>359</td>                        
        </tr>
        <tr>
            <td>Windows 7</td>
            <td>Micorsoft</td>
            <td>$256</td>
            <td>2567</td>                        
        </tr>        
    </tbody>
</table>
<!-- Message -->
<div id="message"></div>

CSS

table thead {
    display: table-row-group;
}
table tbody tr {
    display: none;
}

JavaScript

document.getElementById('search').onkeyup = function(){
    var table = document.getElementById('table'),
        tr = table.rows, td,
        term = this.value.toLowerCase(), column = 0, i, j,
        message = document.getElementById('message');

    for(i = 1; i < tr.length; i++){
        td = tr[i].cells;
        for(j = 0; j < td.length; j++){
            if(j == column && td[j].innerHTML.toLowerCase() == term){
                tr[i].style.display = 'table-row';
                message.innerHTML = '';
                return;
            }else{
                tr[i].style.display = 'none';
                message.innerHTML = 'No results found!';
            }
        }
    }
};

Working jsFiddle If you won't use thead and tbody in your table here is another version jsFiddle

I case you want to search all columns, just change this line

if(j == column && td[j].innerHTML.toLowerCase() == term){

to this one

if(td[j].innerHTML.toLowerCase() == term){

And finally, if you want to have more flexible search try the version below

document.getElementById('search').onkeyup = function(){
    var table = document.getElementById('table'),
        tr = table.rows, td,
        term = this.value.toLowerCase().trim(), column = 0, i, j,
        message = document.getElementById('message'),
        pattern = new RegExp(term, 'gi');

    for(i = 1; i < tr.length; i++){
        td = tr[i].cells;
        for(j = 0; j < td.length; j++){
            if(j == column && term.length > 0 && td[j].innerHTML.match(pattern)){    
                tr[i].style.display = 'table-row';
                message.innerHTML = '';
                return;
            }else{
                tr[i].style.display = 'none';
                message.innerHTML = 'No results found!';
            }
        }
    }
};

Working jsFiddle