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 相关文章推荐
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
vue编写简单的购物车功能
Jan 08 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设计模式  Command(命令模式)
2011/06/17 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
js实现带有动画的返回顶部
2020/08/09 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
flask session组件的使用示例
2018/12/25 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python定义具名元组实例操作
2021/02/28 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
护士自我介绍信
2014/01/13 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
市场营销专业自荐书
2014/06/10 职场文书
预防传染病方案
2014/06/14 职场文书
校本课程教学计划
2015/01/19 职场文书
2015年小学财务工作总结
2015/07/20 职场文书