Raible Designs

[DisplayTag] Changing a row's CSS class based on values in the row.

One request I've seen on the displaytag-user list a few times is the ability to change a <tr>'s CSS class based on a certain value. While the displaytag doesn't have this feature out-of-the-box, it is possible (and fairly easy) to do. All you need to do is sprinkle a little JavaScript into the mix. Basically, the displaytag will render a well-formed HTML table - like the following:

Username	First Name	Last Name
mraible	Matt	Raible
tomcat	Tomcat	User

By adding an "id" attribute to your table (i.e. id="user"), your table will get an "id" attribute and now you can easily access it via the DOM. The following JavaScript will grab the table and search the first column for a value of 'mraible' - and if found, it will change the row's background color to red.

<script type="text/javascript">
<!--
    var table = document.getElementById("user");    
    var tbody = table.getElementsByTagName("tbody")[0];
    var rows = tbody.getElementsByTagName("tr");
    // add event handlers so rows light up and are clickable
    for (i=0; i < rows.length; i++) {
        var value = rows[i].getElementsByTagName("td")[0].firstChild.nodeValue;
        if (value == 'mraible') {
            rows[i].style.backgroundColor = "red";
        }
    }
//-->
</script>

You could easily change rows[i].style... to rows[i].className = if you want to assign a new CSS class. Now let's see it in action (and see if your browser supports it). This has only been tested in Safari and Mozilla on OS X.

Username	First Name	Last Name
mraible	Matt	Raible
tomcat	Tomcat	User

Other displaytag tips: Static Headers HowTo and Highlight and allow clicking of rows. The 2nd tip (highlighting) is available in AppFuse, in the userList.jsp page.

BTW, I also added support for the DisplayTag to render the results from JSTL's SQL Tag. I haven't committed it yet - I'm still waiting for more feedback.

Posted in Java at Mar 08 2004, 01:22:34 PM MST 10 Comments

Comments:

All the Java programmers in the organisation I work for are scared of JavaScript. I think it's freaken cool. The syntax is runny. Some simple articles on Javascript for Java nerds might be useful. I wrote a Javascript logging utility heavily mimicking log4j like syntax and structure.. not sure if I should write it up and release..

Posted by James on March 08, 2004 at 09:53 PM MST #

FYI - it also works in IE on Windows 2000.

Posted by Charlie on March 09, 2004 at 09:00 PM MST #

Wow. This is great. Support for the JSTL Result class is exactly what I've been looking for... When will you be checking it in?

Posted by Ted on March 10, 2004 at 11:33 PM MST #

James - I absolutely agree - JavaScript rocks. I suspect that most JavaScript bashers don't know how to code it - or they've been turned off by some bad code that some rookie wrote.

Ted - Support for the JSTL Result class (a.k.a. Map[] for rows) has been added to CVS. I'm going to update AppFuse with displaytag's latest nightly build and you should be able to checkout a demo at http://demo.raibledesigns.com/appfuse/users.jsp in the next hour or so.

Posted by Matt Raible on March 11, 2004 at 02:06 PM MST #

Is there any way I can use this technique to highlight a row if I click a link in the row? I am working on a web solution where we have up to three displaytag tables on top of eache other, to drill the user down to some specific data. Sometimes the UI gets quite confusing, since there is no markup of what row has been selected in the top lists...

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

your guidelines seems to be great, but I am not able to solve a problem following the same line. Could you help with this. I have a displaytag table with 1st column as checkboxes. On clicking title's checkbox i want all checkboxes to get checked. (i.e. on selecting header chekcbox all rows of table should get checked. Any help would be highly appreciated !! bhumit mody ([email protected]) Thanks

Posted by bhumit on March 03, 2006 at 03:49 PM MST #

Just use this javascript.. function checkAll(headerCheckBox){ var checkBoxes = document.getElementsByName('selectCheckBox'); for ( i = 0; i < checkBoxes.length; i++) checkBoxes[i].checked = headerCheckBox.checked; } but now i have the problem.. On check of a checkbox i have to change the color of the holw row basically hoghlight the row. How m i suppose to do this ?>

Posted by 220.225.70.2 on November 23, 2006 at 08:45 AM MST #

THIS IS REALLY NICE SCRIPT. ACTUALLY I WANT TO CHANGE COLOR OF ROW IN DISPLAY TAG ON THE BASIS OF COLUMN VALUE CONDITION.

Posted by sumadha on May 14, 2009 at 12:07 PM MDT #

The display tag which I am using is already bonded with a list of business object.Now, how can I get the value for each row depending on which I have to change the color? Also, where I have to put the given java script code?It is not a function and how it is getting invoked?

Posted by Neena on September 21, 2010 at 09:44 AM MDT #

Hi, I am displaying a table using diasplay tag. I want to change the color of a cell or row basing on the cell value. I placed your script code in head tag of my jsp as it is just changed the id as data instead of user as you hv given and in if condition i changed it to >= 5. but its not working. Where I am going wrong. I am not able to solve it. Help me in this regard. Thanking you.

Posted by G. Raaja on May 27, 2011 at 12:27 PM MDT #

10+ YEARS

TWITTER

RECENT ENTRIES

Tag Cloud

[DisplayTag] Changing a row's CSS class based on values in the row.