为了方便大家观看效果,首先手动写一个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);
});
分享到:
相关推荐
废话不多说了,直接给大家贴代码了,具体代码如下所示: <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <html> <head> <!-- 引入的css压缩文件 -->...tabl
7.1.html 双击某行变换背景色。 7.2.html 获取鼠标的位置。 7.3.html div中显示选中文本。 7.4.html 检测onkeydown事件与onkeypress事件执行的先后顺序。 7.5.html 窗口离开时提示。 7.6....
课程教学进度周历生成软件 v3.0 Javascript+HTML代码,运行...复制后,选中Word表格中足够多的行数,粘贴即可自动填入各行中,非常便于制作各种星期时间相关的进度表。 v3.0更新: 修复一些错误; 适应常用浏览器;
而前两天,对原有表格做了点儿修改——增加隔行换色的功能,问题就出现了,——效果错乱;检查分析了下,问题出在其table排序插件代码上——其原代码写的比较难理解,修改还不如重新自己写一个table排序插件。 说写...
用于 Web 应用程序的坚如磐石的数据网格。 一个 JavaScript 组件,将数据网格功能与类似电子表格的 UX 相结合。... 各行各业的大公司和初创公司都使用 Handsontable 来构建对其业务至关重要的应用程序。
键盘操作: 按上下左右箭头可在表格内移动,当前格子背景色为黑色,如无选中则从第一行第一列开始,按回车后选择房子,按Delete或“.”为拆掉房子。 如果弹出选择房子时,上下左右箭头为选择当前格子...
5、对于翻屏滚动或间歇滚动,要注意各滚动单位间的间距,同时需要对容器的可视高度和可视宽度做好准确的设置,对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整 6、对于LI自动换行的问题...
* 亮点:只根据年份的数据,自动生成每月的gdp数据,(简单修改下可实现连接后台数据) ...复制名称的行到名称列表; 3.复制所有gdp数据到生成数据输入框中; 4.点击生成数据按钮; 5.再生成动态图表;
/js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取...
将excel表的行数据导入到页面table中,经测试支持各浏览器,如果有浏览器导不进去,可以修改浏览器的编码为utf-8
5、对于翻屏滚动或间歇滚动,要注意各滚动单位间的间距,同时需要对容器的可视高度和可视宽度做好准确的设置,对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整 6、对于LI自动换行的问题...
各大计算机公司的面试题 ...3. 请用HTML在客户端画出一个5行4列的表格,并用Javascript访问表格第1行的2列的内容 4. 请用javascript脚本实现弹出无边框窗口显示a.htm页 5. 运用ASP.NET的输出缓冲来存储动态页面
随着Internet技术的突飞猛进,各行各业都在加入Internet的行业中来。无论从管理方面,还是从商业角度来看,Internet都可以带来无限生机。通过Internet,可以实现地区、集体乃至个人的连接,从而达到一种“统一的和谐...
3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例:百度搜索 第4章 用CSS设置图片效果 4.1 图片样式 4.1.1 图片边框 4.1.2 图片缩放 4.2 图片的对齐 4.2.1 横向对齐方式 4.2.2 纵向...
键盘操作: 按上下左右箭头可在表格内移动,当前格子背景色为黑色,如无选中则从第一行第一列开始,按回车后选择房子,按Delete或“.”为拆掉房子。 如果弹出选择房子时,上下左右箭头为选择当前格子...
这两个组件库都各有各的优点,但就table组件来说,我还是比较喜欢vuetify的实现,不用手写一个个column,只要传入headers的配置数组就行,甚至分页器都内置在了table组件里,用起来十分方便。有兴趣可以看看:...
Google云端硬盘-数据存储在Google表格中,其中第一行是列标题,其余各行是数据。 如果您不需要像关系数据库中那样连接来自多个表/源的数据,则此方法效果很好。 Tabletop.js - 开箱即用的区域: 页面标题...
创建具有以下各列的工作表,并根据需要添加任意多的行。 旨在帮助维护一长串的表情符号(如emoji表情或HTML实体),或从其他系统导入片段。 关键字:例如, fox或fox,foxface,fox face (必填) 片段:例如:fox: ...
TableLines 文章文字各行间都有横线分离 alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,...