js表格各行换色 -

MO_ZHUANG_D

浏览: 2043 次
性别:
来自: 天津

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

js表格各行换色

CSS jQuery 百度 JavaScript C

为了方便大家观看效果，首先手动写一个GridView然后绑定数据。

前台代码：

<body >
    <form id="form1" runat="server">
    <div>
         <asp:GridView ID="gvBaidu" runat="server" AutoGenerateColumns="False" Font-Size="12px"
            Width="409px" CellPadding="4" ForeColor="#333333" GridLines="None">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="编号" />
                <asp:BoundField DataField="Name" HeaderText="姓名" />
                <asp:BoundField DataField="Sex" HeaderText="性别" />
                <asp:BoundField DataField="Age" HeaderText="年龄" />
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
            <EditRowStyle BackColor="#2461BF" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>

    </div>
    </form>
</body>

后台cs代码：

public DataTable dt = new DataTable();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataBindGridView(gvBaidu);
        }
    }

    private void DataBindGridView(GridView Gv)
    {
        dt.Columns.Add("ID", typeof(string));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Sex", typeof(string));
        dt.Columns.Add("Age", typeof(string));
        DataRow dr = dt.NewRow();
        dr["ID"] = "1";
        dr["Name"] = "大傻";
        dr["Age"] = "18";
        dr["Sex"] = "男";
        dt.Rows.Add(dr);

        DataRow dr1 = dt.NewRow();
        dr1["ID"] = "2";
        dr1["Name"] = "花花";
        dr1["Age"] = "22";
        dr1["Sex"] = "女";
        dt.Rows.Add(dr1);

        DataRow dr2 = dt.NewRow();
        dr2["Name"] = "百度";
        dr2["ID"] = "3";
        dr2["Age"] = "88";
        dr2["Sex"] = "男";
        dt.Rows.Add(dr2);

        Gv.DataSourceID = null;
        Gv.DataSource = dt;
        Gv.DataBind();
    }

需要实现的效果：如图

方法1：

最常用的，用的也是最多的。

直接写在后台代码里。

写在RowDataBound事件中

protected void gvBaidu_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //如果当前行尾数据行
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //添加鼠标在当前行时的background-color属性
            e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#fcdead';");

             //鼠标离开当前行后
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
        }
    }

相对来说还是比较方便和容易理解的。
不过写在后台多少会影响性能。所以不推荐。

方法2：

JavaScript写：

//实现鼠标移入移出改变表格行背景颜色
//tableId为Gridview的id
function TbRowbgChange(tableId)
{
     //获取tr
    var rows = document.getElementById(tableId).getElementsByTagName("tr");
    //循环遍历tr
    for(var i=1;i<rows.length;i++)
    {
        var row = rows[i];
        if(row!=null)
        {
            //获取tr的原背景色
            var Color=row.style.backgroundColor;
            row.onmouseover=function(){this.style.backgroundColor='#fc0;};
            row.onmouseout=function(){this.style.backgroundColor=Color;};
        }
    }
}
简单,不影响效率.只需传入id即可.

方法3:

jQuery :

$(document).ready(function()
    {
        //获取背景色
        var $bg;
        //获取页面中的table元素的tr元素,并且tr元素中不包含th元素的hover事件
        $('table tr:not(:has("th"))').hover(function()
        {
            $bg=$(this).css('background-color');
            $(this).css('background-color','#fc0');
        },
        function()
        {
           $(this).css('background-color',$bg);
        });

     //   $('img').fadeTo(2000,0.5).fadeTo(2000,1);

    });

分享到：