0

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>

また、アラートメッセージは私にnullを返します。誰か私が間違っていることはありますか？

4

1 に答える 1

2

ページがブラウザによってロードされる前に、DOMにアクセスしています。したがって、まだテーブルは含まれていません。

jQueryを使用し、DOMの準備ができたらJavaScriptで行うすべてのことを行うことをお勧めします。

$(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-01T14:36:41.930 に答える