DisplayTag 행 색상

displaytag에 문제가 있습니다. 특정 행의 배경색을 변경하려고 할 수 없습니다. 나는이 예제를 따른다. http://raibledesigns.com/rd/entry/displaytag_changing_a_row_s 그러나 아무 일도 일어나지 않는다.DisplayTag 행 색상

<%@ 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>

또한 경고 메시지가 나 null을 반환 :

여기 내 JSP입니다. 내가 뭘 잘못하고 있니?

출처

2012-12-01 user1331582

브라우저에서 페이지를로드하기 전에 DOM에 액세스하고 있습니다. 그래서 아직 테이블이 없습니다.

내가 jQuery를 사용하고, DOM이 준비되면 자바 스크립트에서하고있는 모든 일을 권합니다 :

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

난 당신이 그래도 TR의 배경 색상을 설정할 수 있습니다 확실하지 않다, 그래서 당신은 모든 TD의 배경색을 설정해야 할 수도 있습니다 :

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

당신은 바닐라 JS 함께 할 수있는,하지만 훨씬 덜 간결 것이며, 더 열심히 모든 브라우저를 지원합니다.

출처

2012-12-01 14:36:41

예 내 친구가 맞습니다 "브라우저에서 페이지를로드하기 전에 DOM에 액세스하고 있습니다. 따라서 테이블이 아직 포함되어 있지 않습니다."그래서 함수를 사용하고 있습니다. body onload = "myfunction()" – user1331582

답변

관련 문제