Raible Designs

Making your tables more accessible?

A question was asked on the display tag user list recently. Basically, the user wanted to add onmouseover and onmouseout events to the <tr>'s in a display-tag rendered table. Today, I decided to whip up a quick example of how to do this in a DOM-compliant browser. Just add an "id" attribute to your table, or use document.getElementsByTagName("table") (selecting the appropriate table in the array), and then put the following JavaScript block below your table. Of course, you must define a "tr.over" class in your CSS.

<script type="text/javascript">
    var table = document.getElementById("testTable");
    var rows = table.getElementsByTagName("tr");
    for (i=0; i < rows.length; i++) {
        rows[i].onmouseover = function() { this.className='over' };
        rows[i].onmouseout = function() { this.className='' };
    }
</script>

Now for an example:

Later: You can take this one step further and add an "onclick" event so that the user can edit the record the row is referring to. Let's pretend you have a link in the first <td> of the table. Inside this link is the recordId for that row. Adding an onclick to the row makes it easy to route the user to the details page for the record.

rows[i].onclick = function() {
    var cell = this.getElementsByTagName("td")[0];
    var link = cell.firstChild;
    var id = link.firstChild.nodeValue;
    location.href='URL to details page?recordId='+id;
    this.style.cursor="wait";
}

Posted in The Web at Apr 22 2003, 04:55:25 PM MDT 25 Comments

Comments:

Nice feature. Table looks (too) small though in Opera 7.03.

Posted by Guus on April 23, 2003 at 02:46 AM MDT #

Yeah, last night, I did a bit of testing on the Mac browsers, and it's weird in all of those too. I guess they don't all recognize a <tr>'s height (in CSS) the same. Oh well, if this table were actually filled with data, I'm sure the problems would go away in most browsers.

Posted by Matt Raible on April 23, 2003 at 04:41 AM MDT #

Great example. Now I understand what you were talking about with onmouseover being a dom thing... Thanks!

Posted by Benjamin Simpson on October 28, 2003 at 02:57 PM MST #

Wonderful stuff, exactly what I'm looking for to enhance the displaytags!
Didn't know that you can change event handlers dynamically in html. Hope this works on both, Mozilla and IE....

Posted by Oli Kessler on January 30, 2004 at 04:57 AM MST #

Oli - this works in most popular browsers: IE, Mozilla, Firebird and Safari. Glad you like. ;-)

Posted by Matt Raible on January 30, 2004 at 09:02 AM MST #

This is great (the onclick part especially), all I now need to figure out is how to keep this row selected after the page has finished loading. What happens now is that when the row gets selected, it styleclass is changed by the javascript code, but when the page finishes loading, the styleclass is reset to its initial value. My script now looks like this, and is placed in the document body below the table:
<script type="text/javascript">
var table = document.getElementById("itemsList");
var rows = table.getElementsByTagName("tr");
for (i=0; i < rows.length; i++) {
rows[i].onclick = function() { this.className='selectedRow' };
}
</script>

My table is part of an JSP include file that i Include into my main document this way:
<jsp:include page="Itemslist.jsp">
<jsp:param name="drilldownLinkEnabled" value="on"/>
</jsp:include>

Posted by Knut Erik Ballestad on March 15, 2004 at 04:27 PM MST #

This is great (the onclick part especially), all I now need to figure out is how to keep this row selected after the page has finished loading. What happens now is that when the row gets selected, it styleclass is changed by the javascript code, but when the page finishes loading, the styleclass is reset to its initial value. My script now looks like this, and is placed in the document body below the table:
<script type="text/javascript">
var table = document.getElementById("templatesList");
var rows = table.getElementsByTagName("tr");
for (i=0; i < rows.length; i++) {
rows[i].onclick = function() { this.className='selectedRow' };
}
</script>

My table is part of an JSP include file that i Include into my main document this way:
<jsp:include page="/list/Templates.jsp">
<jsp:param name="drilldownLinkEnabled" value="on"/>
</jsp:include>

Posted by Unknown on March 15, 2004 at 04:30 PM MST #

Great, anybody knows how to do this on column instead of on row ?

Posted by dries on June 03, 2004 at 03:42 AM MDT #

Hi, This is a fine solution but is slow on larger amounts of data. I know I can use the pagination but... :) I've got this app I'm building and sometimes the amount of data shown is quite high. Highlighting a line or moving from line to another can take more than a second, as with smaller amounts it is quite instantenious. Thanks anyway,

Posted by Jari Pakarinen on October 06, 2004 at 07:40 AM MDT #

Posted by Jari Pakarinen on October 06, 2004 at 08:27 AM MDT #

Nice example! I was looking for this, as I'd done it direct to a normal table before ( slightly differently but not much ) and I was wondering how to make it work on displaytag. All I need to sort out is display tag sorting my results when I'm telling it not to and I will be very happy. Anyone know if it is possible to get displaytag to sort on a non displayed value, that would also sort out my prob.

Posted by Andy on October 31, 2004 at 08:18 AM MST #

Lovely, thank you! I can't seem to make it work with document.getElementsByTagName("table") though, only using the id works for me. Nobody else ran into that?

Posted by sam on November 05, 2004 at 08:01 PM MST #

sdfdasf

Posted by 80.227.112.86 on April 26, 2005 at 08:59 AM MDT #

Hi folks,

Don't know if this is still up-to-date (last posts are quite old), but anyway it could help (like it helped me :-) ).
There's a small problem in this script : it looses the odd / even classes when moving the cursor over rows (the rows have no classes once you moused over them)...
I've had to change it slighly to the following :

<code>

</code>
Will try the links right now (tr onclicks)...
Thanks for the useful tips !
Cheers
Remi

Posted by Remi VANKEISBELCK on May 14, 2005 at 05:09 PM MDT #

I have requirement to keep the same record highlighted even after sorting. lets say I have 3 headings >> Name , Department, City I have a default sort by Name, If I select a 4th record and fill the details and then I sort by Department. How can I retain the highlighting of record which might have a different row index.

Posted by Sandip Prashar on July 03, 2005 at 06:48 PM MDT #

Do notice that the javascript code needs to be placed AFTER the table in the body. I know it's in the text, but otherwise it won't work. Usefull piece of code :)

Posted by scndsky on May 30, 2006 at 07:25 AM MDT #

great piece of code.. this is what I call a programmer! 6 lines... just that!! not complicated stuff, useful.. congrats! Juan manuel

Posted by Juan on June 07, 2006 at 05:58 PM MDT #

can anyone give me code for the above

Posted by hemsie on July 19, 2006 at 04:29 AM MDT #

thanks a lot ur code was very useful

Posted by jojo rico on July 12, 2007 at 01:16 AM MDT #

Posted by jojo rico on July 12, 2007 at 01:17 AM MDT #

thanks a lot this was very useful

Posted by jawad richa on July 12, 2007 at 01:18 AM MDT #

Thanks.. your code was very helpful..but i want to highlight all the columns of the row except the first one.. Any help will be highly appreciated. Thanks In advance

Posted by shakun on June 02, 2008 at 01:27 AM MDT #

Thanks.. your code was very helpful..but i want to highlight all the columns of a row except the first one.. Any help will be highly appreciated. Thanks In advance

Posted by shakun on June 02, 2008 at 01:28 AM MDT #

The onclick part isn't working on IE8.

Posted by Marta on July 30, 2009 at 10:29 AM MDT #

10+ YEARS

TWITTER

RECENT ENTRIES

Tag Cloud

Making your tables more accessible?