gridview 鼠标点击行变色等实现

最新推荐文章于 2018-10-19 09:46:05 发布

原创最新推荐文章于 2018-10-19 09:46:05 发布 · 678 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript实现表格中行的选择与样式变化，包括背景色切换及事件响应，提供具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
        var prevselitem = null;
        function selectx(row) {
            if (prevselitem != null) {
                prevselitem.style.backgroundColor = '#ffffff';
            }
            row.style.backgroundColor = '#aaaaaa';
            prevselitem = row;
        }
    </script>

首先在网页的<head>下加上上面的脚本，目的是设置好背景色。

        protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //e.Row.Attributes.Add("onmouseover", "if(this!=prevselitem){this.style.backgroundColor='#Efefef'}");//当鼠标停留时更改背景色
                //e.Row.Attributes.Add("onmouseout", "if(this!=prevselitem){this.style.backgroundColor='#ffffff'}");//当鼠标移开时还原背景色
                e.Row.Attributes.Add("onclick", e.Row.ClientID.ToString() + ".checked=true;selectx(this)");//点击行变色
                //e.Row.Attributes["style"] = "Cursor:hand"; //设置悬浮鼠标指针形状为"小手"
                //  GridView1.HeaderRow.Cells[10].Visible = false;
                // e.Row.Cells[10].Visible = false;//隐藏选择按钮
                //String evt = Page.ClientScript.GetPostBackClientHyperlink(sender as System.Web.UI.WebControls.GridView, "Select$" + e.Row.RowIndex.ToString());
                // e.Row.Attributes.Add("onclick", evt);//执行选择行GridView1_SelectedIndexChanged事件
            }
        }

然后在后台加上事件响应，有许多功能。