Question

42

dynamically filter rows of a HTML table using JavaScript

rated 0 times [ 45] [ 3] / answers: 1 / hits: 22445 / 12 Years ago, tue, april 10, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Wed, Aug 25, 21, 00:00, 3 Years ago

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

View All

answered 12 Years ago lara · Accepted Answer

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}