jquery和css是当今制作网页不可或缺的两种技术,下面贴一段用jquery来操作gridview中的数据的代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> //jquery文件的路径,务必加上
<script type="text/javascript">
$(document).ready(function () {
$("td.f", "#GridView1").text(function () { //利用指示器设定侦听事件
var _f = $(this).text(); //注意text属性引用时后面加上括号,切记
if (_f < 60) {
$(this).css("color", "red"); //jquery调用设置css属性值
}
if (_f > 90) { //jquery对内容要求不是太严格,不用刻意去强制转换
$(this).css("color", "green");
}
})
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="cj_id" DataSourceID="AccessDataSource1">
<Columns>
<asp:BoundField DataField="cj_id" HeaderText="cj_id" InsertVisible="False"
ReadOnly="True" SortExpression="cj_id" />
<asp:BoundField DataField="cj_name" HeaderText="cj_name"
SortExpression="cj_name" />
<asp:BoundField DataField="cj_shuxue" HeaderText="cj_shuxue"
SortExpression="cj_shuxue">
<ItemStyle CssClass="f" /> //注意对ItemStyle巧妙的设置,避免对其他表中非成绩值进行操作
</asp:BoundField>
<asp:BoundField DataField="cj_yuwen" HeaderText="cj_yuwen"
SortExpression="cj_yuwen">
<ItemStyle CssClass="f" />
</asp:BoundField>
<asp:BoundField DataField="cj_huaxue" HeaderText="cj_huaxue"
SortExpression="cj_huaxue">
<ItemStyle CssClass="f" />
</asp:BoundField>
<asp:BoundField DataField="cj_wuli" HeaderText="cj_wuli"
SortExpression="cj_wuli">
<ItemStyle CssClass="f" />
</asp:BoundField>
<asp:BoundField DataField="cj_yingyu" HeaderText="cj_yingyu"
SortExpression="cj_yingyu">
<ItemStyle CssClass="f" />
</asp:BoundField>
</Columns>
</asp:GridView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/mydb.mdb" SelectCommand="SELECT * FROM [tb_chenji]">
</asp:AccessDataSource>
</div>
</form>
</body>
</html>