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.
