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

前端技术 2023/09/02 JavaScript

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

本文地址：https://www.stayed.cn/item/3404

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案