I am trying to write javascript for filtering the values in the table.
The row after header row contains the unique values from the columns. These values are shown using select boxes. i.e. one select box per column.

On onchange event of this select box, I am calling a javascript function to filter the contents of the table and show only the matching rows.

I have also added a funtion to generated links for removing the filters. This functionality works without any problem.

The problem is:
I am using different colors for different rows (odd and even rows) and because of the filter, depending upon the criteria, user can see the same color appearing for two consecutive rows (THIS IS THE PROBLEM).

Does somebody has a better (and may be elegant) solution for javascript filters or can somebody help me with this.


Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Table filter</title>
        <!--link rel='stylesheet' href='css/default.css' type='text/css'-->

       <style>
        TABLE.grid {
            BORDER: black 1px solid; 
            BORDER-COLLAPSE: collapse;
            WIDTH: 65%;
        }

        TABLE.grid TD {
                BORDER: black 1px solid; 
                PADDING: 3px;
        }

        TR.light {
                BACKGROUND-COLOR: White;
        }

        TR.head {
                FONT-WEIGHT: bold; 
                BACKGROUND-COLOR: #CCCCFF;
                white-space: nowrap;
        }

        TD.rowhead {
                font-weight:bold;
        }

        TD.caption {
                background-color: #003366;
                color: White;
                font-weight: bold;
                white-space: nowrap;
        }

        TR.dark {
                BACKGROUND-COLOR: #ccccff;
        }
        </style>

        <script type="text/javascript"><!--
        var counter=0;
        var filters = new Array();
        
        function AddFilter(term, _id, cellNr) {
            for (var i = 0; i < filters.length; i++) {
                if (filters[i]._id == _id && filters[i].cellNr == cellNr) {    // eliminate duplicate filter 
                    filters[i].term = term.value;                           //replace the term for this filter
                    //alert('replacing filter at: ' + i + ' term: ' + term.value)
                    return;
                }
            }
            //alert('adding filter: ' + term.value)
            filters[counter] = new Object
            filters[counter].term = term.value
            filters[counter]._id= _id
            filters[counter].cellNr = cellNr
            counter++
        }
        
        function filter(term, _id, cellNr){
            AddFilter(term, _id, cellNr)
            var table = document.getElementById(_id);
            for (var r = 3; r < table.rows.length; r++) {   //reset the all previous styles applied by the filters
                table.rows[r].style.display = '';
            }
            filterTable(_id)           
        }
        
        function filterTable(_id){
            //alert("noof filters: " + filters.length)
            //alert("term: " + filters[0].term)
            var outp = ""
            for (var i = 0; i < filters.length; i++) {
                if (filters[i]._id == _id) {                //if processing the same table (apply all filters for this table
                    var suche = filters[i].term.toLowerCase();
                    var table = document.getElementById(filters[i]._id);
                    var ele;
                    for (var r = 3; r < table.rows.length; r++) {
                        ele = table.rows[r].cells[filters[i].cellNr].innerHTML.replace(/<[^>]+>/g,"");
                        if (ele.toLowerCase().indexOf(suche) == -1)
                            table.rows[r].style.display = 'none';
                    }
                    outp = outp + '<a href="#" onclick="removeFilter(\'' + _id +'\',\'' + filters[i].cellNr + '\')"><img src="images/removefilter.gif" border="0">' + filters[i].term + '</a> '
                    //alert(outp);
                }
            }
            document.getElementById('outtab').innerHTML = outp;
        }
        
        function removeFilter(_id, cellNr) {
            var table = document.getElementById(_id);
            for (var r = 3; r < table.rows.length; r++) {   //reset the all previous styles applied by the filters
                table.rows[r].style.display = '';
            }
            for (var i = 0; i < filters.length; i++) {
                var currTable = false;
                if (filters[i]._id == _id && filters[i].cellNr == cellNr) {    //the same table.
                    filters.splice(i, 1);
                    counter = counter -1;
                } 
            }
            filterTable(_id)
        }
        --></script>
    </head>
    <body>

        <h1>Table filter</h1>
        <form name="form1">

        <table id="t1" class="grid" cellspacing="0" cellpadding="0" border="0" >
            <tr>
                <td class="caption" colspan="3">Systems</td>
            </tr> 
            <tr class="head">
                <TD>Id</TD>
                <TD>Name</TD>
                <TD>Files</TD>

            </tr>
            <tr class="head">
                <TD>
                    <select name="id" onchange="filter(this, 't1', '0')">
                        <option value="">All
                        <option value="0001">0001
                        <option value="0002">0002
                        <option value="0003">0003
                    </select>
                </TD>
                <TD>

                    <select name="name" onchange="filter(this, 't1', '1')">
                        <option value="">All
                        <option value="TEST_SYSTEM_1">TEST_SYSTEM_1
                        <option value="TEST_SYSTEM_2">TEST_SYSTEM_2
                        <option value="TEST_SYSTEM_3">TEST_SYSTEM_3
                    </select>
                </TD>
                <TD>
                    <select name="mnemonic" onchange="filter(this, 't1', '2')">
                        <option value="">All
                        <option value="TS1">TS1
                        <option value="TS2">TS2
                        <option value="TS3">TS3
                    </select>

                </TD>
            </tr>
            <tr class="light">
                <td>0001</td>
                <td>TEST_SYSTEM_1</td>
                <td>TS1</td>
            </tr> 
            <tr class="dark">

                <td>0002</td>
                <td>TEST_SYSTEM_2</td>
                <td>TS2</td>
            </tr> 
            <tr class="light">
                <td>0003</td>
                <td>TEST_SYSTEM_3</td>

                <td>TS3</td>
            </tr> 
            <tr class="dark">
                <td>0004</td>
                <td>TEST_SYSTEM_2</td>
                <td>TS4</td>
            </tr> 
            <tr class="light">

                <td>0005</td>
                <td>TEST_SYSTEM_2</td>
                <td>TS5</td>
            </tr> 
        </TABLE>
        <table cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td colspan=2><SPAN ID="outtab">&nbsp;</SPAN></td>

            </tr>
        </TABLE>
        </FORM>
    </body>
</html>