Filtering or searching an HTML table using JavaScript

by Heathesh 6. May 2010 20:31

While using SQL Developer (client application I use to connect to and run queries against Oracle), I exported a table to HTML and found some very interesting JavaScript code. The code allowed a user to search or filter the HTML data returned. I thought this might be useful, so I decided to blog on how they did it.

First create a table with data like so:

    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Surname</th>
            <th>Website</th>
        </tr>
        <tbody id="data">
            <tr>
                <td>1</td>
                <td>Heathesh</td>
                <td>Bhandari</td>
                <td><a href="http://heathesh.com">http://heathesh.com</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Candice</td>
                <td>David</td>
                <td><a href="http://candicedavid.com">http://candicedavid.com</a></td>
            </tr>
        </tbody>
    </table>


As you can see the tbody tag has an id "data", this is because you do not want to search the title fields, only the data within the tbody tag. Once you've defined the table with the relevant data, you need to create an initialize method to initialize the object to use to perform the search:

        //define the table search object, which can implement both functions and properties
        window.tableSearch = {};

        //initialize the search, setup the current object
        tableSearch.init = function() {
            //define the properties I want on the tableSearch object
            this.Rows = document.getElementById('data').getElementsByTagName('TR');
            this.RowsLength = tableSearch.Rows.length;
            this.RowsText = [];
           
            //loop through the table and add the data to the table search object
            for (var i = 0; i < tableSearch.RowsLength; i++) {
                this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
            }
        }


The comments should explain what the method is doing. After creating the initialize method, add it to the body onload event to initialize when the page is loaded:

        <body onload="tableSearch.init();">

Next create the actual JavaScript function to run the search like so:

        //onlys shows the relevant rows as determined by the search string
        tableSearch.runSearch = function() {
            //get the search term
            this.Term = document.getElementById('textBoxSearch').value.toUpperCase();
           
            //loop through the rows and hide rows that do not match the search query
            for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
                row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
            }
        }


Once that's done add a function to handle the user pressing the return or enter key:

        //handles the enter key being pressed
        tableSearch.search = function(e) {
            //checks if the user pressed the enter key, and if they did then run the search
            var keycode;
            if (window.event) { keycode = window.event.keyCode; }
            else if (e) { keycode = e.which; }
            else { return false; }
            if (keycode == 13) {
                tableSearch.runSearch();
            }
            else { return false; }
        }


Lastly, add a table that contains a search text box and search button above the table with the relevant data in it:

    <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" />
                    <input type="button" value="Search" onclick="tableSearch.runSearch();" />
                </td>
            </tr>
        </tbody>
    </table>


I've saved the sample html page I created here: http://heathesh.com/code/javascript/tablesearch/. If you right click and view the page source, you will see the implementation first hand.

Happy Scripting!

Tags: , , ,

Development | JavaScript

Comments

4/17/2013 8:34:37 PM #

pingback

Pingback from howtovideo.eu

Javascript Search Exact Results Not Part Of - How-To Video

howtovideo.eu

Comments are closed



Powered by BlogEngine.NET 1.5.0.7 (with enhancements by Heathesh)
Theme by Mads Kristensen (with tweeks by Heathesh)

Certifications

Microsoft Certified Professional

Microsoft Certified Technology Specialist

Answer Questions

 

Tag cloud

Calendar

<<  December 2014  >>
MoTuWeThFrSaSu
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar

http://heathesh.com