javascript控制GridView隔行换色、鼠标移动变色，选中变色

最新推荐文章于 2026-06-23 13:52:18 发布

原创最新推荐文章于 2026-06-23 13:52:18 发布 · 3.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #function #input #hex #html

本文介绍了如何使用JavaScript实现GridView的行颜色控制，包括隔行换色、鼠标悬停变色和选中变色。提供了两种不同的颜色设置方案，并特别处理了包含CheckBox时的行颜色变化。

假如GridView里有CheckBox 选中CheckBox变色

        //把事件放在onload里，因为我不知道JS如果直接写到这儿是不是会等页面加载完才执行
        //使用<%=%>方式输出GridView的ID是因为某些情况下（如使用了MasterPage）会造成HTML中ID的变化
        //颜色值推荐使用Hex，如 #f00 或 #ff0000
        window.onload = function(){
            GridViewColor("<%=GridView1.ClientID%>","#f7f6f3","#edf1f8","#d8e7b0","#d7e3f6");
        }

        //参数依次为（后两个如果指定为空值，则不会发生相应的事件）：
        //GridView ID, 正常行背景色,交替行背景色,鼠标指向行背景色,鼠标点击后背景色
        function GridViewColor(GridViewId, NormalColor, AlterColor, HoverColor, SelectColor){
            //获取所有要控制的行
            var AllRows = document.getElementById(GridViewId).getElementsByTagName("tr");

//全选行变色

            AllRows[0].getElementsByTagName("INPUT")[0].onclick = function()
            {

                for(var i=1; i<AllRows.length; i++)
                {

                    AllRows[i].getElementsByTagName('input')[0].checked=AllRows[0].getElementsByTagName("INPUT")[0].checked;
                    if(AllRows[0].getElementsByTagName("INPUT")[0].checked)
                    {
                        AllRows[i].style.background=SelectColor;
                    }
                    else
                    {
                        if(i%2 == 0){AllRows[i].style.background=AlterColor;}
                        else{AllRows[i].style.background=NormalColor;}
                    }
                }
            }

            //设置每一行的背景色和事件，循环从1开始而非0，可以避开表头那一行
            for(var i=1; i<AllRows.length; i++){
                //设定本行默认的背景色
                AllRows[i].style.background = i%2==0?AlterColor:NormalColor;

                //如果指定了鼠标指向的背景色，则添加onmouseover/onmouseout事件
                //处于选中状态的行发生这两个事件时不改变颜色
                if(HoverColor != ""){
                    AllRows[i].onmouseover = function(){if(!this.getElementsByTagName("INPUT")[0].checked)this.style.background = HoverColor;}
                    if(i%2 == 0){
                        AllRows[i].onmouseout = function(){if(!this.getElementsByTagName("INPUT")[0].checked)this.style.background =AlterColor ;}
                    }
                    else{
                        AllRows[i].onmouseout = function(){if(!this.getElementsByTagName("INPUT")[0].checked)this.style.background = NormalColor;}
                    }
                }

                //如果指定了鼠标点击的背景色，则添加onclick事件
                //在事件响应中修改被点击行的选中状态
                if(SelectColor != ""){
                    AllRows[i].getElementsByTagName("INPUT")[0].onclick = function(){
                        this.parentNode.parentNode.style.background =      this.parentNode.parentNode.style.background==SelectColor?HoverColor:SelectColor;

                    }
                }
            }
        }


    </script>

后台可实现点击CheckBox 全选和行变色

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.Header)
        {
            CheckBox cb = e.Row.FindControl("CheckBox2") as CheckBox;
            cb.Attributes.Add("onclick", "var GridView1=document.getElementById('GridView1');for(var i=1; i<GridView1.rows.length;i++){GridView1.rows[i].cells[0].getElementsByTagName('input')[0].checked=checked;}");
        }

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox cb = e.Row.FindControl("CheckBox1") as CheckBox;
            cb.Attributes.Add("onclick", "if(checked){this.parentNode.parentNode.style.backgroundColor='#d7e3f6';}else{this.parentNode.parentNode.style.backgroundColor='';}");
        }
    }