Clever Geek Handbook

Subsequent validation of lookup values ​​from first column in html table using JS?

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

All I need is when the values ​​are searched by the user, the table headers will also be displayed and if the values ​​are not stored. The message "No results" will be displayed there. How to do it?

Here's a JSfiddle 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';
    }
  }    
}
};
+1


source to share


1 answer


This will be the markup table

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

The default CSS for the markup above. The next step is to combine 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;
}

Finally, a JavaScript snippet using the 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;
      }
    }    
  }
};

JsFiddle Working | Version without tfoot

jsFiddle

Same as above, but using strings [] 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!';
            }
        }
    }
};

JsFiddle working If you won't use thead

it tbody

in your table too , this is another version of jsFiddle

In case you want to find all columns, just change this line

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

to that

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

Finally, if you want 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!';
            }
        }
    }
};

JsFiddle works

+1


source






More articles:


All Articles