Цвет строки DisplayTag

У меня проблема с displaytag, я хочу изменить цвет фона некоторых строк, но не могу. Я следую этому примеру http://raibledesigns.com/rd/entry/displaytag_changing_a_row_s, но ничего не происходит .

Вот мой 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>

Также предупреждающее сообщение возвращает мне ноль. Кто-нибудь, что я делаю неправильно?


row jsp displaytag
person user1331582    schedule 01.12.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы получаете доступ к DOM до того, как страница была загружена браузером. Так что он еще не содержит вашей таблицы.

Я бы посоветовал использовать jQuery и делать все, что вы делаете в JavaScript, как только DOM будет готов:

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

Я не уверен, что вы можете установить цвет фона для tr, поэтому вам, возможно, придется установить цвет фона для каждого td:

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

Вы можете сделать это с помощью vanilla JS, но это будет гораздо менее лаконично и сложнее для поддержки каждого браузера.

person JB Nizet    schedule 01.12.2012
comment
да, мой друг, вы правы. Вы получаете доступ к DOM до того, как страница была загружена браузером. Так что он еще не содержит вашей таблицы... поэтому я использую функцию и вызываю ее из тела onload=myfunction() - person user1331582; 01.12.2012