为了方便大家观看效果,首先手动写一个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);
});
分享到:
相关推荐
总结,表格各行换色是一种有效的数据可视化和用户体验提升技术,涉及到前端开发的多个方面,包括CSS、JavaScript、服务器端编程、无障碍性设计以及性能优化。理解和掌握这些知识点,能够帮助开发者创建出更易用、更...
本示例“razor table分页、隔行变色 table_pages_color_demo”专注于如何在网页上展示数据,同时实现表格的分页功能和隔行变色效果,以提高用户体验。 首先,我们需要理解`razor`语法。Razor视图引擎的核心是`....
总之,实现一个可编辑的JavaScript表格需要理解JavaScript事件处理、DOM操作和数据管理。"GridEdit.js"可能简化了这个过程,提供了一种便捷的方式来实现这样的功能。通过学习这个库和相关的HTML示例,你将能更好地...
如果我们想要动态添加行,我们通常会在JavaScript中创建这些元素,并将其插入到适当的表格位置。 1. 创建表格元素: 在JavaScript中,可以使用`document.createElement()`方法创建新的HTML元素。例如,创建一个表格...
这样,表格的每一行将交替显示不同的背景色,使得数据更易于区分。 **复选框的操作** 复选框在网页中用于让用户选择多个选项。通过JavaScript,我们可以实现复选框的各种交互,如全选/全不选、互斥选择(只能选择一...
1. **添加行**:当点击“添加到表格”按钮时,JavaScript会捕获这个事件,读取输入框的值,并创建一个新的表格行。新行包含与现有行相同结构的四个单元格,其中第一个单元格内的复选框需要绑定点击事件,以响应未来...
**列模型** (`ColumnModel`) 定义了表格中各列的显示方式。 ```javascript var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, { header: '', dataIndex: 'id', width: 40 }, { header: '', ...
这同样是通过为表格行添加mouseover和mouseout事件来实现的,利用jQuery的addClass和removeClass方法来动态地给行添加或移除“se”类,该类在CSS中定义了一个过渡色。 这段示例代码不仅展示了jQuery在操作DOM中的...
这时,我们可以借助JavaScript(JS)来动态地改变行的样式。例如,使用jQuery库,我们可以监听表格的`DOMSubtreeModified`事件,一旦表格内容变化,就重新应用隔行变色: ```javascript $(document).ready(function...
2. 填充数据:根据需要将数据填充到新的行的各单元格中。 3. 插入行:将新行添加到表格的适当位置,可以是表格的末尾(使用`appendChild`)或其他特定位置(可能需要遍历现有行并找到合适的位置插入)。 动态插入行...
#### JavaScript表格遍历代码示例 ```html <head><title>遍历表格 <script language="javascript"> function getData() { var arrData = new Array(); var objTable = document.getElementById("myTable"); if...
- 设置列背景色:`setColumnColor`用于设置各列的背景颜色。 - 设置列宽调整功能:`enableResizing`方法控制用户是否能够调整列宽。 - **其他配置**: - `mandFields`数组用于标记哪些列为必填项。 - `popSet()`...
`这行代码就是初始化`jquery.tablesorter`的命令,`#myTable`是表格的ID。 `jquery.tablesorter`提供了丰富的配置选项,允许开发者自定义排序行为。例如,你可以设置默认的排序列和排序方式,或者为特定列禁用排序...
在本项目中,我们需要创建一个HTML页面,包含一个表格用于展示用户信息,并通过JavaScript实现对表格数据的增删改查功能。以下是对这个任务的详细解释: 首先,我们需要创建一个HTML表格来显示用户信息,包括用户名...
vue-table-带树形网格适用于 Vue.js 2.0 的表格(带有树形网格)...API表属性財產 說明 類型 參數 結果数据 表格各行数据 大批 - []空文本 表格数据为空时显示的文字 细绳 - '暂无数据'列 表格各列的配置(具体见下文Co
然而,对于大型或复杂的表格,用户滚动查看数据时,表头(thead)通常会消失,导致用户难以分辨各列数据的意义。为了解决这个问题,我们可以使用JavaScript实现表头的冻结功能,无论是横向还是纵向,以确保用户在...
HTML用于构建基本的结构,CSS用于美化表格和图表的外观,而JavaScript(可能使用了图表库如Highcharts、Chart.js或D3.js等)则负责动态生成和交互功能。例如,可能有一个JavaScript函数用于从表格数据中提取值,并...
### JavaScript表格控件:Chgrid,简化型 #### 概述 Chgrid是一款基于JavaScript的表格控件,它被设计为轻量级且易于使用的工具,适用于需要展示数据的Web应用。该表格控件旨在通过简化操作流程和提供实用功能来...
这些JavaScript表格控件各有特色,适用于不同的开发需求和项目环境。开发者可以根据项目特点和性能需求选择最适合的控件,以提高用户体验和数据管理效率。在实际应用中,结合服务器端技术和数据库操作,这些表格控件...
4. 必须是块级图像语法(也就是图像语法的上下各空一行,前后不能有其他字符) 表格组件语法示例 小书匠表格组件的语法使用的是 markdown 图像语法,唯一需要注意的是表格组件只能通过小书匠的上传入口,也就是...