我想突出显示具有值'Total'
的DisplayTag行,我试图通过javascript但是我可以这样做.Below是我正在使用的片段。请指导。
参考:How to decorate a row in table using displaytag
当第二列中有“总计”但我没有突出显示时,我收到警报。
如何在第二列中突出显示值Total
的特定行?
<script type="text/javascript">
function onLoad(){
var table = document.getElementById("data");
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
for (i=0; i < rows.length; i++) {
var value = rows[i].getElementsByTagName("td")[1].firstChild.nodeValue;
if (value == 'Total') {
alert('true');
rows[i].style.backgroundColor = "red";
}
}
}
</script>
<body onload="onLoad();">
<%AppUtil oAppUtil=new AppUtil();%>
<jsp:useBean id="realTimeIssuance" scope="session" class="com.mindcraft.mis.tpd.actionform.afRealTimeIssuance"></jsp:useBean>
<display:table name="realtimereportcol" export="true" pagesize="30" sort="list" id="data" requestURI="" class="tablelist" decorator="org.displaytag.decorator.TotalTableDecorator">
<display:column title="SUB_CHANNEL" sortable="true" property="sub_channel"></display:column>
<display:column title="AGENT_NAMES" sortable="true" property="agent_names"></display:column>
<display:column title="FTD" sortable="true" property="ftd" ></display:column>
<display:column title="MTD" sortable="true" property="mtd" ></display:column>
<display:column title="QTD" sortable="true" property="qtd" ></display:column>
</display:table>
</body>
</html>
答案 0 :(得分:3)
使用TableDecorator并实现类似下面的addRowClass()方法......
return ((ListObject)getCurrentRowObject()).getTotal() > 400 ? "highlight" : null;
然后,您可以在CSS文件中定义要突出显示的CSS。
请参阅他们的演示以获取更多信息http://demo.displaytag.org/displaytag-examples-1.1/example-rowclass.jsp
答案 1 :(得分:1)
您必须使用DisplayTag装饰器来操作渲染表的数据和html结构。
在项目包中创建一个简单的Java类,它扩展 TableDecorator 并覆盖 addRowClass 方法。
在类对象的集合上,为集合中的每个对象调用装饰器类方法 addRowClass 。
public class TestTableDecorator extends TableDecorator {
@Override
public String addRowClass() {
return ((AnObject) getCurrentRowObject()).getTotal() > your_threshold ? "css-class-1" : "css-class-2";
}
}
现在在你的.jsp文件中使用属性:
在display:table中声明你的装饰器decorator="path.to.decorator.TestTableDecorator"
希望有所帮助。
答案 2 :(得分:0)
AFAIK,您无法在<tr>
上设置背景颜色。相反,您必须在每个封闭的<td>
上设置它。
我会定义一个类似
的CSS类tr.highlighted td {
background-color: red;
}
并将课程highlighted
添加到相应的<tr>
。