jsprowdisplaytag

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.