代码改变世界

Javascript实现表格table隔行换色以及点击整行变色

2011-01-07 18:19  音乐让我说  阅读(1372)  评论(0)  编辑  收藏  举报

代码如下：

 

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>表格table隔行换色以及点击整行变色</title>
    <style type="text/css">
        .warp_table
        {
            border-collapse: collapse;
            width: 550px;
            border: 1px solid #4d9ab0;
        }
        .warp_table td
        {
            border: 1px solid #4d9ab0;
        }
    </style>

    <script language="javascript" type="text/javascript">
        function senfe(o,a,b,c,d)
        {
             var trs = document.getElementById(o).getElementsByTagName("tr");
             var inputItems = document.getElementById(o).getElementsByTagName("input");
             
             var trLength = trs.length;
             var inputItemLength = inputItems.length;
             for(var i = 0; i < trLength; i++)
             {
                trs[i].style.backgroundColor = a;
                trs[i].onmouseover = function()
                {
                    if(this.x != 1)
                    {
                        this.style.backgroundColor = c;
                    }
                }
                trs[i].onmouseout = function()
                {
                    if(this.x != 1)
                    {
                        this.style.backgroundColor = a;
                    }
                }
             }
             for(var j = 0; j < inputItemLength; j++)
             {
                if(inputItems[j].type == "checkbox")
                {
                    inputItems[j].onclick = function()
                    {
                        for(var k = 0; k < trLength; k++)
                        {
                            if(trs[k].sectionRowIndex == parseInt(this.title))
                            {
                                if(this.checked == true)
                                {
                                    trs[k].style.backgroundColor = d;
                                    trs[k].x = 1;
                                }
                                else
                                {
                                    trs[k].style.backgroundColor = a;
                                    trs[k].x = 0;
                                }
                            }
                        }
                    }
                }
             }
        }
    </script>

</head>
<body>
    <table class="warp_table" id="changecolor">
        <tr>
            <td>

            </td>
            <td>
                序号
            </td>
            <td>
                员工编号
            </td>
            <td>
                员工姓名
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="chkSeleteThis" id="chkSeleteThis1" title="1" />
            </td>
            <td>
                1
            </td>
            <td>
                1001
            </td>
            <td>
                张三
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="chkSeleteThis" id="chkSeleteThis2" title="2" />
            </td>
            <td>
                2
            </td>
            <td>
                1002
            </td>
            <td>
                李四
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="chkSeleteThis" id="chkSeleteThis3" title="3" />
            </td>
            <td>
                3
            </td>
            <td>
                1003
            </td>
            <td>
                王五
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="chkSeleteThis" id="chkSeleteThis4" title="4" />
            </td>
            <td>
                4
            </td>
            <td>
                1004
            </td>
            <td>
                赵六
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="chkSeleteThis" id="chkSeleteThis5" title="5"/>
            </td>
            <td>
                5
            </td>
            <td>
                1005
            </td>
            <td>
                杨七
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="chkSeleteThis" id="chkSeleteThis6" title="6" />
            </td>
            <td>
                6
            </td>
            <td>
                1006
            </td>
            <td>
                朱八
            </td>
        </tr>
    </table>
<script language="javascript" type="text/javascript">
    senfe('changecolor','#f8fbfc','#e5f1f4','#ecfbd4','#bce774');
</script>
</body>
</html>

 

效果图如下：

 

 

谢谢浏览！