DisplayTag row color

I have a problem with displaytag, I want to change the background color of certain rows and I can't. I follow this example http://raibledesigns.com/rd/entry/displaytag_changing_a_row_s but nothing happens.

Here is my jsp :

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<jsp:directive.page contentType="text/html; charset=UTF8" />
<html> 
<head>
<title><spring:message code="label.listeggrafo" /></title>
<script type="text/javascript">

var table = document.getElementById("eggrafa");  
alert(table); 
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++) {


    rows[i].style.backgroundColor = "red";

}

</script>

</head>
<body>
<display:table   name="eggrafa" requestURI="" sort="list"  class="sample" id="eggrafa" export="true" pagesize="10">



  <display:column  media="html"  href="deleteeggrafo.html"  paramId="idtypiko" paramProperty="idtypiko"><img src="<%=request.getContextPath()%>/images/delete.png" />     </display:column>

<display:column property="aa" sortable="true"  href="updateeggrafo.html"
    paramId="idtypiko" paramProperty="idtypiko"  titleKey="label.aa"></display:column>
<display:column property="fakelos_eggrafou" sortable="true" titleKey="label.fakelos"></display:column>
<display:column  property="diabathmisi" sortable="true"  titleKey="label.diab"></display:column>
<display:column property="apostoleas" sortable="true" titleKey="label.apostol"></display:column>
<display:column property="tautotitaeg" sortable="true" titleKey="label.tauteg"></display:column>
    <display:column property="hmeromhniaypog" sortable="true" titleKey="label.hmeryp"></display:column>

    <display:column property="year" sortable="true" titleKey="label.year"></display:column>


<display:column property="filename" sortable="true" href="downloadfileeggrafo.html" paramId="idtypiko" paramProperty="idtypiko" titleKey="label.filename"/>


<display:setProperty name="paging.banner.one_item_found"><span style="background-color: rgb(250, 240, 230)" class="pagebanner"> Ένα {0} βρέθηκε. </span></display:setProperty>
<display:setProperty name="basic.msg.empty_list">Δεν βρέθηκαν Έγγραφα</display:setProperty>
   <display:setProperty name="paging.banner.all_items_found"><span style="background-color: rgb(250, 240, 230)" class="pagebanner"> {0} {1} βρέθηκαν, βλέπετε όλα τα {2}. </span> </display:setProperty>



 <display:setProperty  name="paging.banner.item_name">Έγγραφο</display:setProperty>
 <display:setProperty name="paging.banner.items_name">Έγγραφα</display:setProperty>
 <display:setProperty name="paging.banner.some_items_found"><span  style="background-color: rgb(250, 240, 230)" class="pagebanner"> {0} {1} βρέθηκαν, βλέπετε {2} έως {3}. </span>   </display:setProperty>
  <display:setProperty name="paging.banner.first"><span style="background-color: rgb(250, 240, 230)" class="pagelinks"> [Πρώτη/Προηγούμενη] {0} [ <a href="{3}">Επόμενη</a>/ <a href="{4}">Τελευταία</a>] </span> </display:setProperty>
  <display:setProperty name="paging.banner.last"><span style="background-color: rgb(250, 240, 230)" class="pagelinks">[ <a href="{1}">Πρώτη</a>/ <a href="{2}">Προηγούμενη</a>] {0} [Επόμενη/Τελευταία] </span></display:setProperty>
   <display:setProperty name="paging.banner.full"><span style="background-color: rgb(250, 240, 230)" class="pagelinks"> [<a href="{1}">Πρώτη</a>/ <a href="{2}">Προηγούμενη</a>] {0} [ <a href="{3}">Επόμενη</a>/ <a href="{4}">Τελευταία </a>]</span> </display:setProperty>
<display:setProperty name="export.banner"><div style="background-color: rgb(250, 240, 230)" class="exportlinks"> Εξαγωγή σε Αρχείο: {0} </div></display:setProperty>


</display:table>

</body>
</html>

Also the alert message return me null. Does anybody what i'm doing wrong?

Solution

You're accessing the DOM before the the page has been loaded by the browser. So it doesn't contain your table yet.

I would advise using jQuery, and doing everything you're doing in JavaScript once the DOM is ready:

$(document).ready(function() {
    $('#eggrafa tbody tr').css('background-color', 'red');
});

I'm not sure you can set the background-color of a tr, though, so you might have to set the background color of every td:

$(document).ready(function() {
    $('#eggrafa tbody td').css('background-color', 'red');
});

You could do this with vanilla JS, but it would be much less concise, and harder to support every browser.