Dynamically Filter Rows Of A Html Table Using Javascript

Question

So I have this table:

Broj_pu

Naziv_pu

ID

Solution 1:

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'];

functionExcludeRows(cls){

  var skipRows=[];

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

  var pattern=skipRows.join('|')

  return pattern;
}

functionFilter(srcField){

   var node=srcField.parentNode;

   var index=srcField.parentNode.cellIndex;
    //all the DATA rowsvar dataRows= document.getElementsByClassName("row");

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

   var filter ='hide_'+srcField.id;

   var pattern = ExcludeRows(filter);

   var skipRow = newRegExp(pattern,"gi");

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

   var replaceCls= newRegExp(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

<tableborder="1"align="center"><tr><td>Broj_pu</td><td>Naziv_pu</td><td>ID</td><td>Naselje</td><td>zupanija</td></tr><tr><td><inputtype="text"ID="broj_pu"onkeydown="Filter(this)" /></td><td><inputtype="text"ID="naziv_pu"onkeydown="Filter(this)" /></td><td><inputtype="text"ID="ID"onkeydown="Filter(this)" /></td><td><inputtype="text"ID="naselje"onkeydown="Filter(this)" /></td><td><inputtype="text"ID="zupanija"onkeydown="Filter(this)" /></td></tr><trclass="row" ><td>10000</td><td>Zagreb</td><td>1</td><td>Sljeme</td><td>ZAGREBACKA</td></tr><trclass="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}

Solution 2:

For Javascript Table Search, Try:

<p>Search: <inputtype="text"id="searchTerm"onkeyup="doSearch()" /></p><tableid="dataTable"><script>functiondoSearch() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("searchTerm");
            filter = input.value.toUpperCase();
            table = document.getElementById("dataTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    </script>

Html5 School

Dynamically Filter Rows Of A Html Table Using Javascript

Solution 1:

Solution 2:

Post a Comment for "Dynamically Filter Rows Of A Html Table Using Javascript"