表格奇偶行不同色怎么做

我做了一个表格，现在用一条代码实现了鼠标滑动在上面变色，但是我不会做表格奇偶行背景色不同。比如奇数行红色，偶数行蓝色。求大侠指教啊。
<tr id="tr" onmouseover="this.style.background='#f5f0f0'" onmouseout="this.style.background=''">这是我滑动其上变色的代码。如果有好的，请指点我下。在此谢谢了啊

解决方案 »

  1.   

    这个jquery比较方便
    $("tr:odd").css({background: "#f00"}); // 1, 3…… 行
    $("tr:even").css({background: "#00f"}); // 2, 4…… 行
      

  2.   

    我试过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>
      

  3.   

    用for循环的时候判断一下奇偶数或者楼上的jquery都可以。
      

  4.   

       你不用知道有几行啊  ..  你的行数也是通过 iterator  或这个 循环 出来的..在循环的同时  拿到为奇数的 什么颜色 如果为偶数的什么颜色 
      

  5.   

    设置CSS：
    tr{
       bgcolor:expression(this.bgcolor=((this.rowIndex)%2==0)?'white':'yellow');
    }
    偶数行白色，奇数行黄色
      

  6.   

    循环出来的时候更好判断呀, 直接那里加上背景颜色咯, 另外3楼的那个jquery确实不错的, 
    jquery在这方面真好, 呵呵,你也不用判断啦, 直接页面加载完, 用上3楼的, 就可以咯
      

  7.   

    10楼 请问 3楼的那个代码直接加到table后面就可以了吗？
      

  8.   


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

  9.   

    这个直接放到页面js代码里面就行了，需要引入jquery然后上述代码放到页面加载完成事件中，如下
    $(document).ready(function(){
       //上述代码代码
    })
      

  10.   

    就是页面加载完执行就可以咯, 
    很多方法咯,如果用jquery的那个的话,<script type="text/javascript">
    // 这里放在<head>里面也可以, 放在<table>后面也可以
    $(function(){
        $("tr:odd").css({background: "#f00"}); // 1, 3…… 行
        $("tr:even").css({background: "#00f"}); // 2, 4…… 行
    });
    </script>
      

  11.   

    <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>
    我用了你的方法试了下 没用啊