dynamically filter rows of a HTML table using JavaScript

dom, html, javascript

Solution

This question is reminding me of how java script is nasty without any framework support :)

However I have sorted-out this issue for you ( tested on firefox 10.0.2).

check the complete working solution on jsfiddle

please remember this is just working example , you might need to write ALL-Browser compliant script .

script:

var filters=['hide_broj_pu','hide_naziv_pu','hide_ID','hide_naselje','hide_zupanija'];

function ExcludeRows(cls){

  var skipRows=[];

  for(i=0;i<filters.length;i++)
      if(filters[i]!=cls) skipRows.push(filters[i]);

  var pattern=skipRows.join('|')

  return pattern;
}

function Filter(srcField){

   var node=srcField.parentNode;

   var index=srcField.parentNode.cellIndex;
    //all the DATA rows

   var dataRows= document.getElementsByClassName("row");

   //ensure that dataRows do not have any filter class added already
   var kids= dataRows.length;

   var filter ='hide_'+srcField.id;

   var pattern = ExcludeRows(filter);

   var skipRow = new RegExp(pattern,"gi");

   var searchReg =new RegExp('^'+srcField.value,'gi');

   var replaceCls= new RegExp(filter,'gi');

   for(i=0; i< kids ; i++){
       //skip if already filter applied  

       if(dataRows[i].className.match(skipRow)) continue;

       //now we know which column to search
       //remove current filter
       dataRows[i].className=dataRows[i].className.replace(replaceCls,'');

       if(!dataRows[i].cells[index].innerHTML.trim().match(searchReg))
          dataRows[i].className=dataRows[i].className +' '+ filter;

    }



}

HTML

<table border="1" align="center">
<tr><td>Broj_pu</td><td>Naziv_pu</td><td>ID</td><td>Naselje</td><td>zupanija</td></tr>
<tr>
<td><input type="text" ID="broj_pu"    onkeydown="Filter(this)" /></td>
<td><input type="text" ID="naziv_pu"   onkeydown="Filter(this)" /></td>
<td><input type="text" ID="ID"         onkeydown="Filter(this)" /></td>  
<td><input type="text" ID="naselje"    onkeydown="Filter(this)" /></td>
<td><input type="text" ID="zupanija"   onkeydown="Filter(this)" /></td>   
</tr>

<tr class="row" ><td>10000</td><td>Zagreb</td><td>1</td><td>Sljeme</td><td>ZAGREBACKA</td></tr>
<tr class="row" ><td>10000</td><td>Zagreb</td><td>2</td><td>Zagreb-dio</td><td>ZAGREBACKA</td></tr>
</table>

CSS

.hide_broj_pu,
.hide_naziv_pu,
.hide_ID,
.hide_naselje,
.hide_zupanija
{display:none}

Problem

So I have this table: ``` <table border="1" align="center"> <tr> <td>Broj_pu</td> <td>Naziv_pu</td> <td>ID</td> <td>Naselje</td> <td>zupanija</td> </tr> <tr> <td><input type="text" ID="broj_pu" onkeydown="Filter(document.getElementById('broj_pu').value, 'broj_pu')" /></td> <td><input type="text" ID="naziv_pu" onkeydown="Filter(document.getElementById('naziv_pu').value, 'naziv_pu')" /></td> <td><input type="text" ID="ID" onkeydown="Filter(document.getElementById('ID').value, 'ID')" /></td> <td><input type="text" ID="naselje" onkeydown="Filter(document.getElementById('naselje').value, 'naselje')" /></td> <td><input type="text" ID="zupanija" onkeydown="Filter(document.getElementById('zupanija').value, 'zupanija')" /></td> </tr> <tr class="row" ID="row_filter"> <td>10000</td> <td>Zagreb</td> <td>1</td> <td>Sljeme</td> <td>ZAGREBACKA</td> </tr> <tr class="row" ID="row_filter"> <td>10000</td> <td>Zagreb</td> <td>2</td> <td>Zagreb-dio</td> <td>ZAGREBACKA</td> </tr> <!-- A lot of rows --> ... </table> ``` And also I have started this JavaScript: ``` <script type="text/javascript"> function Filter(text, column_name){ var x = document.getElementByClassName("row"); var i = 0; var y; if (text != ""){ switch (column_name){ case "broj_pu": for (i = 0; i < x.length; i++){ y = x[i].getElementByTagName("td"); if((y[0].value).match(text) == null){ x[i].attributes(style) = "{display:none;}"; } } break; case "naziv_pu": y = x[i].getElementByTagName("td"); if((y[1].value).match(text) == null){ x[i].attributes(style) = "{display:none;}"; } } break; case "ID": y = x[i].getElementByTagName("td"); if((y[2].value).match(text) == null){ x[i].attributes(style) = "{display:none;}"; } } break; case "naselje": y = x[i].getElementByTagName("td"); if((y[3].value).match(text) == null){ x[i].attributes(style) = "{display:none;}"; } } break; case "zupanija": y = x[i].getElementByTagName("td"); if((y[4].value).match(text) == null){ x[i].attributes(style) = "{display:none;}"; } } break; } } } </script> ``` Now, I need to filter the table as the user inputs letters to the text fields, but I have no idea how to edit the display document as I enter the data. Anyone have an idea? EDIT1: So I edited the script but it doesn't seem to work. What did I do wrong?

Original source