动态改变交替tr背景色 存在display隐藏行

那你就不要用css设置了
应该display设置好以后，判断一下，然后js设置className

解决方案 »

  1.   

    没有思路，只有代码！
    L@_@K
    <!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>
        <title> new document </title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
        <style type="text/css">
    .firstRow
    {
        background-color: #ffff00;
    }
    .secondRow
    {
        background-color: #dddddd;
    }
        </style>
    </head>
    <body>
        <table id="tbeColor" width="100%">
            <tr>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2<input type="button" value="hide row" onclick="this.parentNode.parentNode.style.display='none';refreshStyle('tbeColor');" /></td>
            </tr>
            <tr>
                <td>3</td>
                <td>3<input type="button" value="hide row" onclick="this.parentNode.parentNode.style.display='none';refreshStyle('tbeColor');" /></td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>1</td>
            </tr>
            <tr>
                <td>6</td>
                <td>2</td>
            </tr>
            <tr>
                <td>7</td>
                <td>3</td>
            </tr>
            <tr>
                <td>8</td>
                <td>4</td>
            </tr>
        </table>
    </body>
    <script type="text/javascript">
    <!--
    function refreshStyle(sTableId)
    {
        var oRows = document.getElementById(sTableId).rows;
        var currentClass = "secondRow";
        for (var i=0; i<oRows.length; i++)
        {
            if (oRows[i].style.display != "none")
            {
                if (currentClass == "secondRow")
                    currentClass = "firstRow";
                else
                    currentClass = "secondRow";            oRows[i].className = currentClass;
            }
        }    
    }
    refreshStyle("tbeColor");
    //-->
    </script>
    </html>
      

  2.   

    <style type="text/css">
    #t {width:100%;}
    .a {background:red;}
    .b {background:orange;}
    </style><table id="t">
    <tr><td class="a"><input type="button" value="隐藏" onclick="hide(this.parentNode.parentNode);"></td></tr>
    <tr><td class="b"><input type="button" value="隐藏" onclick="hide(this.parentNode.parentNode);"></td></tr>
    <tr><td class="a"><input type="button" value="隐藏" onclick="hide(this.parentNode.parentNode);"></td></tr>
    <tr><td class="b"><input type="button" value="隐藏" onclick="hide(this.parentNode.parentNode);"></td></tr>
    </table><script type="text/javascript">
    function hide(rowobj){
    //下班先；
    }
    </script>
      

  3.   

    更新一下refreshStyle，第一版太啰嗦！
    function refreshStyle(sTableId)
    {
        var oRows = document.getElementById(sTableId).rows;
        var currentClass = "firstRow";
        for (var i=0; i<oRows.length; i++)
        {
            if (oRows[i].style.display != "none")
            {
                oRows[i].className = currentClass;            currentClass = currentClass=="firstRow" ? "secondRow" : "firstRow";
            }
        }    
    }