css 可以实现兼容主流浏览器的奇偶行不同颜色吗

gsk09 2011-10-17 10:26:12

刚开始学CSS，想请教大家css 可以实现兼容主流浏览器的奇偶行不同颜色吗
希望能给出示例代码。

---我在网上找了，都是只支持IE，不兼容其他浏览器的。

...全文

197 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

bear63 2011-10-17

打赏
举报

我还是建议我的方法，楼主可以快速解决问题。

你再想其他的，可能会有更好，但你找了多久了？

不是在浪费时间吗？可以解决问题，兼容性好，就可以了，反正客户，用户，也不会去看你的代码。对不？

「已注销」 2011-10-17

打赏
举报

下面这个用js实现的例子共楼主参考下



<html>

<head>

<script type="text/javascript">

 window.onload=function highlightTableRow(){

  var tables = document.getElementsByTagName("table");

  for(var k=0;k<tables.length;k++){

    if(tables[k].getAttribute("highlight")=="yes"){

      var rows = tables[k].getElementsByTagName("tr");

      var from = 0, to = rows.length;

      if(tables[k].getAttribute("from")){

        from = Number(tables[k].getAttribute("from"))-1;//从第from行起开始高亮鼠标所在行

      }

      if(tables[k].getAttribute("to")){

        to = rows.length + Number(tables[k].getAttribute("to"))+1;//高亮鼠标所在行一直到倒数第Math.abs(to)行

      }

      for(var i=from;i<to;i++){

        if(i%2==0){

          rows[i].style.backgroundColor = tables[k].getAttribute("evenColor");

          rows[i].setAttribute("alternativeColor",tables[k].getAttribute("evenColor"));

        }else{

          rows[i].style.backgroundColor = tables[k].getAttribute("oddColor");

          rows[i].setAttribute("alternativeColor",tables[k].getAttribute("oddColor"));

        }

        rows[i].onmouseover = function(){//第一个parentNode是tbody，第二个才是table

          this.style.backgroundColor = this.parentNode.parentNode.getAttribute("highlightColor");

        };

        rows[i].onmouseout = function(){

          this.style.backgroundColor = this.getAttribute("alternativeColor");

        };

      }

    }

  }

}

</script>

</head>

<body>

<table border="1" highlight="yes" from="1" to="-1" highlightColor="#0099FF" oddColor="#B6DBE4" evenColor="#F1F2F4">

  <tr><td>第一行</td></tr>

  <tr><td>第二行</td></tr>

  <tr><td>第三行</td></tr>

  <tr><td>第四行</td></tr>

  <tr><td>第五行</td></tr>

  <tr><td>第六行</td></tr>

</table>

</body>

</html>

chendong_j 2011-10-17

打赏
举报

写一个方法接收1个或多个参数去设置每一行的class，通过修改参数和css就能得出不同页面效果了

001007009 2011-10-17

打赏
举报

两个办法
1.两个css ，后台输出的时候，交叉使用
2.用js来做。

gsk09 2011-10-17

打赏
举报

[Quote=引用 3 楼 kkbac 的回复:]

这种效果还是用js吧.
[/Quote]

js是Javascript吗？可以给个简单示例吗

kkbac 2011-10-17

打赏
举报

这种效果还是用js吧.

gsk09 2011-10-17

打赏
举报

[Quote=引用 1 楼 bear63 的回复:]

建两个样式名称，不同颜色

表格的每个 <tr class=""> 分别调用就可以了。
[/Quote]

这个方法简单易懂。可以作为保底的安全方法。

有没有其他的方法了呢？比如，如果突然要求又变成，1,2,3行分别用红黄蓝三种颜色，后面的行按此规律循环的话，不仅要改CSS，还用改很多HTML，能不能只改CSS就实现呢。

bear63 2011-10-17