表格奇偶行不同色怎么做

wshiwushengzhong 2011-09-28 04:36:53
我做了一个表格，现在用一条代码实现了鼠标滑动在上面变色，但是我不会做表格奇偶行背景色不同。比如奇数行红色，偶数行蓝色。求大侠指教啊。
<tr id="tr" onmouseover="this.style.background='#f5f0f0'" onmouseout="this.style.background=''">这是我滑动其上变色的代码。如果有好的，请指点我下。在此谢谢了啊
...全文
446 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
仲兴轩 2011-09-29
  • 打赏
  • 举报
 回复
循环出来的时候更好判断呀, 直接那里加上背景颜色咯,

另外3楼的那个jquery确实不错的,
jquery在这方面真好, 呵呵,

你也不用判断啦, 直接页面加载完, 用上3楼的, 就可以咯
luyun2011 2011-09-29
  • 打赏
  • 举报
 回复
设置CSS：
tr{
bgcolor:expression(this.bgcolor=((this.rowIndex)%2==0)?'white':'yellow');
}
偶数行白色，奇数行黄色
luochengor 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 gewei565 的回复:]

这个jquery比较方便
$("tr:odd").css({background: "#f00"}); // 1, 3…… 行
$("tr:even").css({background: "#00f"}); // 2, 4…… 行
[/Quote]
+1，学习了
wshiwushengzhong 2011-09-29
  • 打赏
  • 举报
 回复
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双色表格CSS实例</title>
<script type="text/javascript">
// 这里放在<head>里面也可以, 放在<table>后面也可以
$(function(table){
$("tr:odd").css({background: "#f00"}); // 1, 3…… 行
$("tr:even").css({background: "#00f"}); // 2, 4…… 行
});
</script>

</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>
我用了你的方法试了下 没用啊
仲兴轩 2011-09-29
  • 打赏
  • 举报
 回复
就是页面加载完执行就可以咯,
很多方法咯,

如果用jquery的那个的话,


<script type="text/javascript">

// 这里放在<head>里面也可以, 放在<table>后面也可以

$(function(){

    $("tr:odd").css({background: "#f00"}); // 1, 3…… 行

    $("tr:even").css({background: "#00f"}); // 2, 4…… 行

});

</script>
「已注销」 2011-09-29
  • 打赏
  • 举报
 回复
上面引错了，应该引的13楼回复的代码
「已注销」 2011-09-29
  • 打赏
  • 举报
 回复
这个直接放到页面js代码里面就行了，需要引入jquery然后上述代码放到页面加载完成事件中，如下
$(document).ready(function(){
//上述代码代码
})
[Quote=引用 12 楼 crazywa 的回复:]

HTML code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双色表格CSS实例</title>
<style type="text/css">
.FindAreaTable1 {
font-size: 12px;
color: #333333;
……
[/Quote]
xuexiaodong2009 2011-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 gewei565 的回复:]

这个jquery比较方便
$("tr:odd").css({background: "#f00"}); // 1, 3…… 行
$("tr:even").css({background: "#00f"}); // 2, 4…… 行
[/Quote]不错啊
Crazywa 2011-09-29
  • 打赏
  • 举报
 回复 


<html>

<head>

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

<title>双色表格CSS实例</title>

<style type="text/css">

.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>



<script type="text/javascript">

(function(){

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

    for(var i=0,j=rows.length;i<j;i++){

        rows[i].backgroundColor = rows[i].style.backgroundColor = (i&1)?"#FFF0F0":"#F0F0FF";

        rows[i].onmouseover = function(){this.style.backgroundColor = "#69cdff";}

        rows[i].onmouseout = function(){ this.style.backgroundColor = this.backgroundColor;}

    }

})();

</script>

</body>

</html>
wshiwushengzhong 2011-09-29
  • 打赏
  • 举报
 回复
10楼 请问 3楼的那个代码直接加到table后面就可以了吗？
wshiwushengzhong 2011-09-28
  • 打赏
  • 举报
 回复
哦 这样啊 我试试 谢了啊
abcd_ufo 2011-09-28
  • 打赏
  • 举报
 回复
你不用知道有几行啊 .. 你的行数也是通过 iterator 或这个 循环 出来的..

在循环的同时 拿到为奇数的 什么颜色 如果为偶数的什么颜色
wshiwushengzhong 2011-09-28
  • 打赏
  • 举报
 回复
回复4楼：我的表格行是通过数据库来实现的，我事先并不知道有几行啊
一起混吧 2011-09-28
  • 打赏
  • 举报
 回复
用for循环的时候判断一下奇偶数或者楼上的jquery都可以。
alex_312 2011-09-28
  • 打赏
  • 举报
 回复
我试过IE8里没问题。
你试试吧。css控制的。代码不难懂。
<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"
);
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"
)
)
)
}
)
)
}



.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>
「已注销」 2011-09-28
  • 打赏
  • 举报
 回复
这个jquery比较方便
$("tr:odd").css({background: "#f00"}); // 1, 3…… 行
$("tr:even").css({background: "#00f"}); // 2, 4…… 行
wshiwushengzhong 2011-09-28
  • 打赏
  • 举报
 回复
哦 谢了啊
三石-gary 2011-09-28
  • 打赏
  • 举报
 回复
论坛里有这个问题。。。自己找下巴
Css实现表格奇偶行不同色
本文提供了一个使用CSS实现的双色交替行效果的表格实例。该实例通过表达式设置不同行的背景颜色，并为表格的第一行设置了特殊样式。此外，还通过onmouseover和onmouseout事件实现了鼠标悬停时的颜色变化效果。
表格奇偶行换色——简单表格与分组表格
本文介绍了如何使用JavaScript插件为表格数据的奇偶行添加不同的颜色，并实现了带有分组的表格的奇偶行换色功能。
自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)
介绍了一个使用DIV、UL和LI实现的表格插件，具备奇偶行变色、鼠标悬停效果、点击高亮及双击事件等功能，并展示了HTML示例代码。
利用JavaScript实现表格隔行换色
该博客展示了使用JavaScript实现表格隔行换色的代码。通过获取表格元素，遍历表格行，根据行索引的奇偶性分别设置不同的背景颜色，偶数行设为粉色，奇数行设为金色，实现表格隔行换色效果。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章