jQuery数据检索中根据关键字快速定位GridView指定行的实现方法


Posted in Javascript onJune 08, 2016

本文实例讲述了jQuery数据检索中根据关键字快速定位GridView指定行的实现方法。分享给大家供大家参考,具体如下:

运行截图如下:

jQuery数据检索中根据关键字快速定位GridView指定行的实现方法

具体代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowGridviewContent.aspx.cs" Inherits="ShowGridviewContent" %>
<!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 id="Head1" runat="server">
  <title></title>
  <style type="text/css">
    .hightlite
    {
      background-color:Gray;
    }
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#searchBtn").click(function () {
        var search = $("#SearchWord").val();
        var row = $('#grdEmployees >tbody >tr');
        var rowcolumn = $('#grdEmployees >tbody >tr >td');
        row.removeClass('hightlite');
        rowcolumn.each(function (column) {
          var match = $(this).html();
          if (match == search) {
            $(this).parent().addClass('hightlite');
          }
        });
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <input type="text" id="SearchWord" /><input type="button" id="searchBtn" value="快速定位行" />
  <asp:GridView ID="grdEmployees" runat="server" AllowPaging="true" PageSize="10"
   AutoGenerateColumns="false" DataSourceID="objectDataSource" class="gv" >
   <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID" />
    <asp:BoundField DataField="FName" HeaderText="FName" />
    <asp:BoundField DataField="MName" HeaderText="MName" />
    <asp:BoundField DataField="LName" HeaderText="LName" />
    <asp:BoundField DataField="DOB" HeaderText="时间" DataFormatString="{0:MM/dd/yyyy}" />
    <asp:BoundField DataField="Sex" HeaderText="性别" />
   </Columns>
   </asp:GridView>
   <asp:ObjectDataSource ID="objectDataSource" runat="server" SelectMethod="GetEmployeeList" TypeName="Employee"></asp:ObjectDataSource>
  </div>
  </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
///Employee 的摘要说明
/// </summary>
public class Employee
{
  public int ID { get; set; }
  public string FName { get; set; }
  public string MName { get; set; }
  public string LName { get; set; }
  public DateTime DOB { get; set; }
  public char Sex { get; set; }
  public List<Employee> GetEmployeeList()
  {
    List<Employee> empList = new List<Employee>();
    empList.Add(new Employee() { ID = 1, FName = "John", MName = "", LName = "Shields", DOB = DateTime.Parse("12/11/1971"), Sex = 'M' });
    empList.Add(new Employee() { ID = 2, FName = "Mary", MName = "Matthew", LName = "Jacobs", DOB = DateTime.Parse("01/17/1961"), Sex = 'F' });
    empList.Add(new Employee() { ID = 3, FName = "Amber", MName = "Carl", LName = "Agar", DOB = DateTime.Parse("12/23/1971"), Sex = 'M' });
    empList.Add(new Employee() { ID = 4, FName = "Kathy", MName = "", LName = "Berry", DOB = DateTime.Parse("11/15/1976"), Sex = 'F' });
    empList.Add(new Employee() { ID = 5, FName = "Lena", MName = "Ashco", LName = "Bilton", DOB = DateTime.Parse("05/11/1978"), Sex = 'F' });
    empList.Add(new Employee() { ID = 6, FName = "Susanne", MName = "", LName = "Buck", DOB = DateTime.Parse("03/7/1965"), Sex = 'F' });
    empList.Add(new Employee() { ID = 7, FName = "Jim", MName = "", LName = "Brown", DOB = DateTime.Parse("09/11/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 8, FName = "Jane", MName = "G", LName = "Hooks", DOB = DateTime.Parse("12/11/1972"), Sex = 'F' });
    empList.Add(new Employee() { ID = 9, FName = "Robert", MName = "", LName = "", DOB = DateTime.Parse("06/28/1964"), Sex = 'M' });
    empList.Add(new Employee() { ID = 10, FName = "Krishna", MName = "Murali", LName = "Sunkam", DOB = DateTime.Parse("04/18/1969"), Sex = 'M' });
    empList.Add(new Employee() { ID = 11, FName = "Cindy", MName = "Preston", LName = "Fox", DOB = DateTime.Parse("06/15/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 12, FName = "Nicole", MName = "G", LName = "Holiday", DOB = DateTime.Parse("08/21/1974"), Sex = 'F' });
    empList.Add(new Employee() { ID = 13, FName = "Sandra", MName = "T", LName = "Feng", DOB = DateTime.Parse("04/15/1976"), Sex = 'F' });
    empList.Add(new Employee() { ID = 14, FName = "Roberto", MName = "", LName = "Tamburello", DOB = DateTime.Parse("01/06/1982"), Sex = 'M' });
    empList.Add(new Employee() { ID = 15, FName = "Cynthia", MName = "O", LName = "Lugo", DOB = DateTime.Parse("01/21/1968"), Sex = 'M' });
    empList.Add(new Employee() { ID = 16, FName = "Yuhong", MName = "R", LName = "Li", DOB = DateTime.Parse("08/22/1979"), Sex = 'M' });
    empList.Add(new Employee() { ID = 17, FName = "Alex", MName = "", LName = "Shoop", DOB = DateTime.Parse("03/01/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 18, FName = "Jack", MName = "K", LName = "Brown", DOB = DateTime.Parse("04/11/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 19, FName = "Andrew", MName = "U", LName = "Gibson", DOB = DateTime.Parse("08/21/1977"), Sex = 'M' });
    empList.Add(new Employee() { ID = 20, FName = "George", MName = "K", LName = "Wood", DOB = DateTime.Parse("07/15/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 21, FName = "Eugene", MName = "", LName = "Miller", DOB = DateTime.Parse("09/13/1974"), Sex = 'M' });
    empList.Add(new Employee() { ID = 22, FName = "Russell", MName = "", LName = "Gorgi", DOB = DateTime.Parse("08/19/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 23, FName = "Katie", MName = "", LName = "Sylar", DOB = DateTime.Parse("08/21/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 24, FName = "Michael", MName = "M", LName = "Bentler", DOB = DateTime.Parse("11/26/1977"), Sex = 'M' });
    empList.Add(new Employee() { ID = 25, FName = "Barbara", MName = "L", LName = "Duffy", DOB = DateTime.Parse("05/29/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 26, FName = "Stefen", MName = "J", LName = "Northup", DOB = DateTime.Parse("01/26/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 27, FName = "Shane", MName = "", LName = "Nay", DOB = DateTime.Parse("02/21/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 28, FName = "Brenda", MName = "", LName = "Lugo", DOB = DateTime.Parse("08/18/1981"), Sex = 'F' });
    empList.Add(new Employee() { ID = 29, FName = "Shammi", MName = "I", LName = "Rai", DOB = DateTime.Parse("03/13/1968"), Sex = 'M' });
    empList.Add(new Employee() { ID = 30, FName = "Rajesh", MName = "H", LName = "Vyas", DOB = DateTime.Parse("04/19/1969"), Sex = 'M' });
    empList.Add(new Employee() { ID = 31, FName = "Gabe", MName = "P", LName = "Lloyd", DOB = DateTime.Parse("08/21/1971"), Sex = 'M' });
    return empList;
  }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
详解vue-cli3使用
Aug 14 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
jquery模拟多级复选框效果的简单实例
Jun 08 #Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 #Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 #Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 #Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PDO::rollBack讲解
2019/01/29 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
js tab 选项卡
2009/04/26 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python中文件的读取和写入操作
2018/04/27 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
销售主管岗位职责
2014/02/08 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
员工工作表现自我评价
2015/03/06 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python