主要代码如下:
一、样式
二、js
三、后台关键代码
绑定数据到GridView等等操作省略……
一、样式
<style type="text/css">
.over
{
background:#ace1eb;
}
.alt
{
background: #fafeff;
}
</style>
二、js
<script type="text/javascript" src="../../js/jquery-1.3.2.js"></script>
<script type="text/javascript">
//---------------隔行变色、搜索框输入及时过滤,兼容UpdatePanel--------------
var t = false; //此变量用于判断行是否存在偶行变色样式类
$(function() {
load();
});
//分开写为了是在后台触发此方法,兼容UpdatePanel
function load() {
$("#gvFieldData tr:even").addClass("alt"); //此#gvFieldData 为GridView在客户端id
$("#gvFieldData tr").hover(
function() {
t = $(this).hasClass("alt");
if (t)
$(this).removeClass("alt"); //移除此背景样式类后,再添加另外一个背景样式类
$(this).addClass("over");
},
function() {
if (t)
$(this).addClass("alt");
$(this).removeClass("over");
}
);
var $trs = $("tr"); //选择所有行
//实时筛选,#txtSearchKey此为关键字收集文本框
$("#txtSearchKey").keyup(function() {
$trs.show();
var countrys = []; //存放及时搜索内容
if (this.value != "") {
$trs.hide();
//一、不兼容指定列查询,不兼容title等属性的处理
//$trs.filter(":first,:contains('" + this.value + "')").show();
//二、兼容指定列查询-----------------
$trs.filter(":first").show();
var tds = $("#gvTableData tr").find("td:eq(2),td:eq(3),td:eq(4)");
var v = this.value;
tds.filter(function(index) {
//span标签为适应页面显示长内容,截取部分显示,而全部的则放在titile中,将截取的要显示部分用span包裹起来
var t = $(this).children("span").attr("title");
if (t.toUpperCase().indexOf(v.toUpperCase()) != -1) {
countrys.push($(this).parent());
$(this).parent().show();
}
});
//------------------------------------------
}
$trs.removeClass("alt"); //移除背景色为新内容准备
//一、不兼容指定列查询,不兼容title等属性的处理
//$trs.filter(":contains('" + this.value + "'):even").addClass("alt"); //给偶数行添加odd样式
//------------------------------------------
//二、兼容指定列查询
var tds = $("#gvTableData tr").find("td:eq(2),td:eq(3),td:eq(4)");
if (countrys.length > 0) {
$.each(countrys, function(i, n) {
if (i % 2 != 0)
this.addClass("alt");
});
} else {
$trs.filter(":even").addClass("alt");
}
});
}
//--------------------------------------------------------------------------
</script>
三、后台关键代码
绑定数据到GridView等等操作省略……
//因为有UpdatePanel1所以onload事件要重新触发一次
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "load", "load()", true);