當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网上找到一个用不同颜色显示表格奇偶行的例子

發布時間：2025/7/14 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了网上找到一个用不同颜色显示表格奇偶行的例子小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>雙色表格CSS實例</title>
<style type="text/css">
#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" : "");
??? TableSelect: expression(
??????? this.sectionRowIndex == 0 ? "" :
??????? (
??????????? onmouseover = function()
??????????? {
??????????????? this.style.backgroundColor =
??????????????? (
??????????????????? this.style.backgroundColor != "#69cdff" ? "#69cdff" :
??????????????????? (
??????????????????????? this.sectionRowIndex == 0 ? "#FFCCCC" :
??????????????????????? (
??????????????????????????? this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
??????????????????????? )
??????????????????? )
??????????????? )
??????????? },
??????????? onmouseout = function()
??????????? {
??????????????? 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>
</head>
<body>
<table cellspacing="1" class="FindAreaTable1" ID="DataGrid1">
? <tr>
??? <td>首行首列</td>
??? <td>首行</td>
??? <td>首行</td>
??? <td>首行</td>
??? <td>首行</td>
??? <td>首行</td>
? </tr>
? <tr>
??? <td>行1首列</td>
??? <td>行1</td>
??? <td>行1</td>
??? <td>行1</td>
??? <td>行1</td>
??? <td>行1</td>
? </tr>
? <tr>
??? <td>行2首列</td>
??? <td>行2</td>
??? <td>行2</td>
??? <td>行2</td>
??? <td>行2</td>
??? <td>行2</td>
? </tr>
? <tr>
??? <td>行3首列</td>
??? <td>行3</td>
??? <td>行3</td>
??? <td>行3</td>
??? <td>行3</td>
??? <td>行3</td>
? </tr>
? <tr>
??? <td>行4首列</td>
??? <td>行4</td>
??? <td>行4</td>
??? <td>行4</td>
??? <td>行4</td>
??? <td>行4</td>
? </tr>
? <tr>
??? <td>行5首列</td>
??? <td>行5</td>
??? <td>行5</td>
??? <td>行5</td>
??? <td>行5</td>
??? <td>行5</td>
? </tr>
</table>
</body>
</html>
另外，我?以前還看到過另外幾種簡單的方式，等以后有空再把它們找回來。

轉載于:https://www.cnblogs.com/javaEEspring/archive/2007/10/06/2522951.html

總結

以上是生活随笔為你收集整理的网上找到一个用不同颜色显示表格奇偶行的例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。