js表格各行换色

最新推荐文章于 2024-05-19 21:32:11 发布

MO_ZHUANG_D

最新推荐文章于 2024-05-19 21:32:11 发布

阅读量140

点赞数

文章标签： CSS jQuery 百度 JavaScript C ViewUI

本文链接：https://blog.csdn.net/MO_ZHUANG_D/article/details/83630446

版权

为了方便大家观看效果，首先手动写一个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.οnmοuseοver=function(){this.style.backgroundColor='#fc0;};
row.οnmοuseοut=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);

});