急！使用css不同颜色显示表格奇偶行的例子，但是在firefox中显示不出来

aggieduo 2011-07-18 04:58:52

<TITLE></TITLE>
<style type="text/css">
.test {
background-color:red;
}
#DataGrid1 tr {
background-color: expression(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
(this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF"
)
);
color: expression(this.sectionRowIndex == 0 ? "#FFFFFF" : "");
font-weight: expression(this.sectionRowIndex == 0 ? "BOLD" : "");
RowSelect: expression(0==1?"":(
onclick = function()
{
window.currentRow?window.currentRow.style.backgroundColor=(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
):"";
this.style.backgroundColor="#f3c3f3";
window.currentRow=this;
window.stopOut=true;
}
)
);

TableSelect: expression(
this.sectionRowIndex == 0 ? "" :
(
onmouseover = function()
{
window.stopOut=false;
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
},
onmouseout = function()
{
if(window.stopOut) return;
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
}
)
);

}

#DataGrid1 td {
background-color:expression(
this.cellIndex == 0 ?
(
this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
)
: null
)
}
.FindAreaTable1 {
font-size: 12px;
color: #333333;
text-decoration: none;
width: 400px;
cursor: hand;
background-color: #FFFFFF;
vertical-align: middle;
text-align: center;
}
</style>

。。。。
<div style="display: none" id="table">
<table cellspacing="1" class="FindAreaTable1" id="DataGrid1">
<tr>
<td>id</td>
<td>商品名称</td>
<td>销售月份</td>
<td>总数</td>
</tr>
<%
Collection arr = list.selectCollection();
Iterator it = arr.iterator();
while(it.hasNext()){
salesInfo form = (salesInfo)it.next();
%>
<tr>
<td><%=form.getId()%></td>
<td><%=form.getShopname()%></td>
<td><%=form.getSmonth()%></td>
<td><%=form.getStotal()%></td>
</tr>
<%
}
%>
</table>
</div>

...全文

80 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

aggieduo 2011-07-18

打赏
举报

谢谢大虾的指点

aggieduo 2011-07-18

打赏
举报

有哪位大侠有关于js的相关代码，可以参考一下啊

乌镇程序员 2011-07-18

打赏
举报

[Quote=引用 2 楼 aggie_duo 的回复:]

FF不支持CSS的吗？
[/Quote]
CSS当然是支持的，不支持的是CSS表达式（CSS expression）。

你的代码没加上高亮，看起来太乱，懒得细看了，写了个简单的例子，具体的自己修改下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

td { border:1px solid #CCC; }

</style>

<script type="text/javascript">

window.onload = function() {

	var rows = document.getElementById('DataGrid1').getElementsByTagName('tr');

	//设置首行CSS

	rows[0].style.backgroundColor = '#FCC';

	rows[0].style.color = '#FFF';

	for(var i = 1; i < rows.length; i ++) {

		if (i % 2 == 0) {

			rows[i].style.backgroundColor = '#FFF0F0';

		}

		else {

			rows[i].style.backgroundColor = '#F0F0FF';

		}

	}

}

</script>

</head>



<body>

<table width="100%" border="0" id="DataGrid1">

    <tr>

        <td> </td>

        <td> </td>

        <td> </td>

    </tr>

    <tr>

        <td> </td>

        <td> </td>

        <td> </td>

    </tr>

    <tr>

        <td> </td>

        <td> </td>

        <td> </td>

    </tr>

    <tr>

        <td> </td>

        <td> </td>

        <td> </td>

    </tr>

    <tr>

        <td> </td>

        <td> </td>

        <td> </td>

    </tr>

</table>

</body>

</html>