SimplyGold

An unstyled table is like nails on blackboard, more so than any other part of the web page. It’s especially important to style the table in a pleasant manner when you have lots of data to present. Imagine if your table contains a couple of hundred elements. Pretty soon all the rows start to blur together. It’s extremely frustrating to the user, and frustrated users are bad for business.###Zebra Tables

One common method used to increase table-readability-and-usability is by highlighting the alternate rows with a different color:

I use this technique quite a lot, and one of the frustrating things is that when you hard-code which rows are alternate (by adding the class = “alt” directive to the row itself), it becomes a nightmare if you have to change the order of the rows for some reason. This is something that happens a lot to me while the application is still in development. One easy way to “fix” this is by using javascript to add the “alt” class to the alternate rows on the fly:

function highlightAlt()
{
    var theTable = document.getElementById("theTableId");

    var theTRs = theTable.getElementsByTagName("tr");

    for(var i = 0; i < theTRs.length; i += 2)
    {
        var currTR = theTRs<i>;

        //The space is here to set it off from any other
        //classes the tr might belong to
        currTR.className += " alt";
    }

}

Highlighting Row When User Clicks On It

Suppose you have a table that has a hundred elements. The user selects whatever rows he wants (via checkboxes) and then clicks a button at the bottom to perform an action. While the checked checkboxes in the row might provide clue to what rows she selected, it pays to make it more obvious by highlighting it. Javascript to rescue again:

function highlightOnClick()
{
    var theTable = document.getElementById("theTableId");

    var theTRs = theTable.getElementsByTagName("tr");

    for(var i = 0; i < theTRs.length; i++)
    {
        var currTR = theTRs<i>;

        currTR.onclick = function()
        {
            if(this.active == true)
            {
                var index = this.className.indexOf(" clicked");
                this.className = this.className.substr(0, index);
                this.active = false;
            }

            else
            {
                this.className += " clicked";
                this.active = true;
            }
        }
    }
}

I’m sure there’s a much easier way to replace “clicked” with an empty string. But as I’m a newbie javascript coder, I couldn’t make anything else to work. I wasted a lot of time with the Replace() function but that refused to work.

Allow User to Select a Row By Clicking Anywhere on the Row

The checkbox is a small tiny thing that’s stuck somewhere at the very left or right of the row. It makes the users’ life a lot simpler and happier if they can select the checkbox by clicking anywhere on the row, and I’m all for making users happier, especially as I need to add only 4 extra lines to the code in Listing 2 to make it everything work.

The updated code, then:

function highlightOnClick()
{
    var theTable = document.getElementById("theTableId");

    var theTRs = theTable.getElementsByTagName("tr");

    for(var i = 0; i < theTRs.length; i++)
    {
        var currTR = theTRs<i>;

        currTR.onclick = function()
        {
            if(this.active == true)
            {
                var index = this.className.indexOf(" clicked");
                this.className = this.className.substr(0, index);
                this.active = false;

                var chk = this.getElementsByTagName
                            ("input")[0];
                chk.checked = false;

            }

            else
            {
                this.className += " clicked";
                this.active = true;

                var chk = this.getElementsByTagName
                            ("input")[0];
                chk.checked = true;
            }
        }
    }
}

It’s a good idea to keep in mind accessibility rules as you create your tables. I’m not going to mention styling the headers, because that’s something most people do by themselves. For alternate row color, it’s a good idea to use faded colors so that it doesn’t get in the user’s way. #dddddd and eeeeee are my favorite. ;-)