www.webdeveloper.com
Results 1 to 5 of 5

Thread: Javascript table filter

Hybrid View

  1. #1
    Join Date
    Aug 2005
    Location
    Sankt Augustin, Germany
    Posts
    15

    Javascript table filter

    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>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Run this after sort/selecting:
    Code:
            function zebaTable() {
            var aTR=document.getElementById('t1').getElementsByTagName('tr');
            for(var i=3; i<aTR.length; i++) { // skip 'header' rows
            	aTR[i].className=(i%2)? 'light' : 'dark';
                }
            }

  3. #3
    Join Date
    Aug 2005
    Location
    Sankt Augustin, Germany
    Posts
    15

    It works fine.

    Thanks a lot Fang! It works as desired

    i think, within a short time, i am going to come with another problem. i am trying to make extent this script to have sort functionality. I have borrowed a script from http://www.mattkruse.com/ and trying to integrate it with my code.

    I am facing problems with this. lets see if I come up with a solution or put the problem on this forum

  4. #4
    Join Date
    Feb 2013
    Posts
    2
    Super..

  5. #5
    Join Date
    Jul 2013
    Posts
    1
    How to add one more column and search.. pls help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles