基于jQuery实现页面搜索功能

正文实例使用jQuery达成动态找寻显示效果,只要输入值就能够及时动态显示数据,不一样于常规查询形式,供大家参照他事他说加以考察,具体内容如下

本案例采纳jQuery完成动态寻找突显效果,只要输入值就会及时动态展现数据,不一致于常规查询格局。

听他们说jQuery完毕动态找寻呈现效果,jquery彰显效果

正文实例使用jQuery完毕动态寻觅展现效果,只要输入值就能够立刻动态呈现数据,不一样于常规查询办法,供大家参谋,具体内容如下

照猫画虎效果如下:

情况1:

图片 1

情况2:

                 
图片 2

贯彻代码:  

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>struts2</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <script type="text/javascript" src="<%=request.getContextPath()%20%>/js/jquery-1.4.1.js"></script>
 <script type="text/javascript">
 //数据源,json的格式.
 var user=[{"id": 1, "name": "张三","age":"25"},
    {"id": 2, "name": "李四","age":"35"},
    {"id": 3, "name": "王五","age":"20"},
    {"id": 4, "name": "老王","age":"20"},
    {"id": 5, "name": "老张","age":"25"},
    {"id": 6, "name": "李四","age":"35"},
    {"id": 7, "name": "王五","age":"20"},
    {"id": 8, "name": "老王","age":"20"},
    {"id": 9, "name": "abc","age":"25"},
    {"id": 10, "name": "李b四","age":"35"},
    {"id": 11, "name": "125","age":"20"},
    {"id": 12, "name": "246","age":"20"},
    {"id": 13, "name": "张三","age":"25"},
    {"id": 14, "name": "李四","age":"35"},
    {"id": 15, "name": "王五","age":"20"},
    {"id": 16, "name": "老王","age":"20"},
    {"id": 17, "name": "张三","age":"25"},
    {"id": 18, "name": "李四","age":"35"},
    {"id": 19, "name": "王五","age":"20"},
    {"id": 20, "name": "老王","age":"20"}];
 $(document).ready(function(){
  var seach=$("#seach");
  seach.keyup(function(event){
   //var keyEvent=event || window.event; 
   //var keyCode=keyEvent.keyCode; 
   // 数字键:48-57
   // 字母键:65-90
   // 删除键:8
   // 后删除键:46
   // 退格键:32
   // enter键:13 
   //if((keyCode>=48&&keyCode<=57)||(keyCode>=65&&keyCode<=90)||keyCode==8||keyCode==13||keyCode==32||keyCode==46){
    //获取当前文本框的值
    var seachText=$("#seach").val();
    if(seachText!=""){
     //构造显示页面
     var tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
     //遍历解析json
     $.each(user,function(id, item){
      //如果包含则为table赋值
      if(item.name.indexOf(seachText)!=-1){
      tab+="<tr align='center'><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td></tr>";
      }
     })
     tab+="</table>";
     $("#div").html(tab);
     //重新覆盖掉,不然会追加
     tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
    }else{
     $("#div").html("");
    }
   // }
  })
 });
 </script>
 </head>

 <body>
  名字:<input id="seach" />
  <br/><br/>
  <div id="div"></div>
 </body>
</html>

如上就是本文的全部内容,希望对大家的读书抱有支持。

本文实例使用jQuery实现动态寻觅展现效果,只要输入值就会立时动态显示数据,分裂于常规…

先简单讲一下供给:页面中会列出多行个人消息记录,为便于寻找,在顶层增添二个搜索栏,可根据客商姓名查找记录。

jQuery实现页面搜索,寻找筛选择户输入的开始和结果!

依傍效果如下:

模参谋果如下:

借使只想查看代码,可跳过深入分析进程,作品尾部提供了总体的代码。

图片 3

情况1:

1、图片 4
2、图片 5

以下是本身的编纂进程:

HTML:

图片 6

                  

动态页面,多条记下均由forEach生成,结构如下:

<div class="table">
    <table>
      <tr id="theader">
      <th>姓名</th>
      <th>性别</th>
      <th>联系方式</th>
    </tr>
    <tr>
      <td>客服</td>
      <td>女</td>
      <td>161654466</td>
    </tr>
    <tr>
      <td>掌柜</td>
      <td>男</td>
      <td>37398378737</td>
    </tr>
    <tr>
      <td>小二</td>
      <td>男</td>
      <td>37398378737</td>
    </tr>
    <tr>
      <td>小三</td>
      <td>女</td>
      <td>3464653537</td>
    </tr>
    <tr>
      <td>小四</td>
      <td>女</td>
      <td>37398378737</td>
    </tr>
    </table>
    <input type="text"></input>
    <input type="button" value="搜索"></input>

  </div>

情况2:

     

<form name="userForm"> 
  <table style="width:200px;"> 
    <thead> 
      <tr> 
        <th> </th> 
        <th> </th> 
        <th>教师姓名</th> 
      </tr> 
    </thead> 
    <tbody> 
      <c:forEach items="${userList}" var="user" varStatus="itStatus"> 
      <tr> 
        <td class="cellBg-gary">${itStatus.index+1}</td> 
        <td> 
          <input type="checkbox" name="userId" value="${user.id}"/> 
        </td> 
        <td>${user.name}</td> 
      </tr> 
      </c:forEach> 
    </tbody> 
  </table> 
</form> 

JQ:

                 
图片 7

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>struts2</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="<%=request.getContextPath()%20%>/js/jquery-1.4.1.js"></script>
    <script type="text/javascript">
    //数据源,json的格式.
    var user=[{"id": 1, "name": "张三","age":"25"},
              {"id": 2, "name": "李四","age":"35"},
              {"id": 3, "name": "王五","age":"20"},
              {"id": 4, "name": "老王","age":"20"},
              {"id": 5, "name": "老张","age":"25"},
              {"id": 6, "name": "李四","age":"35"},
              {"id": 7, "name": "王五","age":"20"},
              {"id": 8, "name": "老王","age":"20"},
              {"id": 9, "name": "abc","age":"25"},
              {"id": 10, "name": "李b四","age":"35"},
              {"id": 11, "name": "125","age":"20"},
              {"id": 12, "name": "246","age":"20"},
              {"id": 13, "name": "张三","age":"25"},
              {"id": 14, "name": "李四","age":"35"},
              {"id": 15, "name": "王五","age":"20"},
              {"id": 16, "name": "老王","age":"20"},
              {"id": 17, "name": "张三","age":"25"},
              {"id": 18, "name": "李四","age":"35"},
              {"id": 19, "name": "王五","age":"20"},
              {"id": 20, "name": "老王","age":"20"}];
    $(document).ready(function(){
        var seach=$("#seach");
        seach.keyup(function(event){
            //var keyEvent=event || window.event;   
            //var keyCode=keyEvent.keyCode;  
            // 数字键:48-57
            // 字母键:65-90
            // 删除键:8
            // 后删除键:46
            // 退格键:32
            // enter键:13  
            //if((keyCode>=48&&keyCode<=57)||(keyCode>=65&&keyCode<=90)||keyCode==8||keyCode==13||keyCode==32||keyCode==46){
               //获取当前文本框的值
               var seachText=$("#seach").val();
               if(seachText!=""){
                  //构造显示页面
                  var tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
                  //遍历解析json
                  $.each(user,function(id, item){
                     //如果包含则为table赋值
                     if(item.name.indexOf(seachText)!=-1){
                        tab+="<tr align='center'><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td></tr>";
                     }
                  })
                  tab+="</table>";
                  $("#div").html(tab);
                  //重新覆盖掉,不然会追加
                  tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
               }else{
                  $("#div").html("");
               }
           // }
        })
    });
    </script>
  </head>

  <body>
      名字:<input id="seach" />
      <br/><br/>
      <div id="div"></div>
  </body>
</html>

为了方便调节和测量试验静态页面,能够先将web项目运转,然后在浏览器中查看源代码,复制form中的代码,另存为一个地面HTML文件。

$(function(){
    $("input[type=button]").click(function(){
      var txt=$("input[type=text]").val();
      if($.trim(txt)!=""){

        $("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show().css("background","red");
      }else{
        $("table tr:not('#theader')").css("background","#fff").show();
      }
    });
  })

贯彻代码:  

chrome操作如下:

如上正是本文的整体内容,希望对我们的上学抱有帮忙,也可望大家多多帮助脚本之家。

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>struts2</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <script type="text/javascript" src="<%=request.getContextPath()%20%>/js/jquery-1.4.1.js"></script>
 <script type="text/javascript">
 //数据源,json的格式.
 var user=[{"id": 1, "name": "张三","age":"25"},
    {"id": 2, "name": "李四","age":"35"},
    {"id": 3, "name": "王五","age":"20"},
    {"id": 4, "name": "老王","age":"20"},
    {"id": 5, "name": "老张","age":"25"},
    {"id": 6, "name": "李四","age":"35"},
    {"id": 7, "name": "王五","age":"20"},
    {"id": 8, "name": "老王","age":"20"},
    {"id": 9, "name": "abc","age":"25"},
    {"id": 10, "name": "李b四","age":"35"},
    {"id": 11, "name": "125","age":"20"},
    {"id": 12, "name": "246","age":"20"},
    {"id": 13, "name": "张三","age":"25"},
    {"id": 14, "name": "李四","age":"35"},
    {"id": 15, "name": "王五","age":"20"},
    {"id": 16, "name": "老王","age":"20"},
    {"id": 17, "name": "张三","age":"25"},
    {"id": 18, "name": "李四","age":"35"},
    {"id": 19, "name": "王五","age":"20"},
    {"id": 20, "name": "老王","age":"20"}];
 $(document).ready(function(){
  var seach=$("#seach");
  seach.keyup(function(event){
   //var keyEvent=event || window.event; 
   //var keyCode=keyEvent.keyCode; 
   // 数字键:48-57
   // 字母键:65-90
   // 删除键:8
   // 后删除键:46
   // 退格键:32
   // enter键:13 
   //if((keyCode>=48&&keyCode<=57)||(keyCode>=65&&keyCode<=90)||keyCode==8||keyCode==13||keyCode==32||keyCode==46){
    //获取当前文本框的值
    var seachText=$("#seach").val();
    if(seachText!=""){
     //构造显示页面
     var tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
     //遍历解析json
     $.each(user,function(id, item){
      //如果包含则为table赋值
      if(item.name.indexOf(seachText)!=-1){
      tab+="<tr align='center'><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td></tr>";
      }
     })
     tab+="</table>";
     $("#div").html(tab);
     //重新覆盖掉,不然会追加
     tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
    }else{
     $("#div").html("");
    }
   // }
  })
 });
 </script>
 </head>

 <body>
  名字:<input id="seach" />
  <br/><br/>
  <div id="div"></div>
 </body>
</html>

图片 8

您恐怕感兴趣的篇章:

  • jQuery达成搜索页面关键字的作用
  • jQuery完成的仿百度,仿谷歌(Google)搜索下拉框效果示例
  • Jquery
    Easyui寻觅框组件SearchBox使用详解(19)
  • jQuery学习笔记——jqGrid的利用记录(完结分页、寻找效果)
  • Jquery插件仿百度寻找关键字自动匹配成效
  • jquery
    zTree异步加载、模糊寻找轻松实例共享
  • 基于jquery实现的切近百度寻找的输入框自动完毕功效
  • 依赖jquery的仿百度搜索框效果代码
  • 接纳jQuery完结可输入寻觅文字的下拉框
  • jquery实现静态搜索功效(可输入寻找文字)

以上就是本文的全部内容,希望对我们的上学抱有扶助。

为了看起来舒服一些,轻便的加码部分表格样式:

你也许感兴趣的稿子:

  • 据悉jQuery达成页面搜索效果
  • jquery
    ztree完成模糊搜索效果
  • 听他们说jQuery完毕搜索关键字自动匹配功效
  • 动用jQuery轻巧达成模拟浏览器找寻作用
  • jquery仿寻找自动联想成效代码
  • Jquery实现搜索框提醒意义示例代码
  • 依赖jquery实现的切近百度寻觅的输入框自动完结作用
  • jquery
    模拟类寻找框自动达成寻找提示作用(革新)
  • asp.net下使用jQuery.AutoComplete完毕仿Taobao商品寻找自动实现作用(革新了键盘上下采纳体验)
  • jQuery实现动态文字搜索成效
<style type="text/css"> 
  table{ 
    border-collapse:collapse; 
    text-align: center; 
  } 
  table, th, td{ 
    border: 1px solid black; 
  } 
</style> 

接下去,大家在<thead>中加进二个找出框:

<tr> 
  <th colspan="3"> 
    <input type="text" id="searchText"/> 
    <input type="button" id="searchBtn" value="搜索"/> 
  </th> 
</tr> 

设置八个单击事件的监听:

$(function(){ 
  $('#searchBtn').on('click', function(){ 
    alert('search'); 
  }); 
}); 

此间有几个提出:

1、为了防止代码相互影响,尽量明显监听的作用域

2、当您不分明当前的风浪触发者时(如:<td><a href=”#”
onclick=””</a></td>),能够alert($(this))来鲜明触发成分

修改后的代码如下:

$(function(){ 
  $('#userForm').on('click', '#searchBtn', function(){ 
    alert($(this).val() + ':' + $(this).html()); 
  }); 
}); 

咱俩得以通过$(‘#searchText’).val()获取文本框中输入的多少,无难度,首要难点是怎么在页面中搜索与之同盟的要素:

为了升高效能,尽恐怕的制止选用each、replace和RegExp(),推荐使用jQuery
:contains选用器,具体用法为$(“td:contains(str)”)

这里遇到了三个主题素材:contains(str)中的str对象会被驾驭为字符串”str”,找到的消除方案是行使字符串拼接的法子,有越来越好的实施方案的长辈,请不吝赐教。

再者,为了标准查找,大家给急需研究的<td>标签设置三个class属性,则有:

<td class="userNameTd">${user.name}</td>

为此,获取查找结果的言语为:

$("td.userNameTd:contains("+  $('#searchText').val() +")")

为了明显展现查找结果,笔者使用的方案是先将<tbody>下的<tr>全体逃匿,然后再将结果所在的<tr>行展现出来,

与此同期当输入框中的值为空时,展现出全数列。方法成为:

$(function(){ 
  $('#userForm').on('click', '#searchBtn', function(){ 
    if($('#searchText').val()){ 
      $('#userForm').find('tbody tr').hide() 
      $("td.userNameTd:contains("+ $('#searchText').val() +")").parent('tr').show(); 
    }else{ 
      $('#userForm').find('tbody tr').show(); 
    } 
  }); 
}); 

从那之后,一个简单的文字搜索已经初具雏形了。我们再来举行局部健全专门的学问。

首先,为了更招来关键字更醒目一些,大家能够更改一下$(‘#searchText’).val()的背景颜色

笔者们先创建三个体制:

.bg-y{ 
  background-color: yellow; 
} 

因为操作的是文字,并不是指标,所以不可能充实class属性,消除方式为使用
replace(‘str’, ‘<span class=”bg-y”>’+str+'</span>’);

对联合对象进行一再操作,能够先将对象赋值给二个变量。修改后的代码为:

$(function(){ 
  $('#userForm').on('click', '#searchBtn', function(){ 
    var searchText = $('#searchText').val(); 
    if(searchText){ 
      $('#userForm').find('tbody tr').hide(); 
      var tds = $("td.userNameTd:contains("+ $('#searchText').val() +")"); 
      tds.html(tds.html().replace(searchText,''+searchText+'')); 
      tds.parent('tr').show(); 
    } else { 
      $('#userForm').find('tbody tr').show(); 
    } 
  }); 
}); 

那时候又境遇了二个难题,此前扩大背景颜色的文字,不会收回背景观。所以,大家在历次事件产生时,实践贰个cleanHighLight()函数,将搜索时增添的<span>再替换来原先的从头到尾的经过。

function cleanHighLight() { 
  var tds = $('span.bg-y').parent(); 
  var vCurrentText = $('span.bg-y').html(); 
  if(!!tds.html()){ 
    tds.html(tds.html().replace(''+ vCurrentText +'', vCurrentText )); 
  } 
} 

下一场,以为输入文本之后,还索要点击,这一点相当不够本人,我们能或无法采用输入文本就能够动态寻觅呢?

我们试着将监听指标改换为输入框’#searchText’,监听事件造成’change’

$('#userForm').on('change', '#searchText', function(){ 
  //alert($('#searchText').val()); 
  $('#userForm').find('tbody tr').hide() 
  $("td.userNameTd:contains("+ $('#searchText').val() +")").parent('tr').show(); 
}); 

但结果是,必需在文本框失去主题时才会接触事件,并从未直达预期。

由此查找资料,找到了施工方案:可同期绑定oninput
和onpropertychange事件。代码如下:

$(function(){ 
  $('#userForm').on('input propertychange', '#searchText', function(){ 
    var searchText = $('#searchText').val(); 
    cleanHighLight(); 
    if(searchText){ 
      $('#userForm').find('tbody tr').hide(); 
      var tds = $("td.userNameTd:contains("+searchText +")"); 
      tds.html(tds.html().replace(searchText,''+searchText+'')); 
      tds.parent('tr').show(); 
    } else { 
      $('#userForm').find('tbody tr').show(); 
    }   
  }); 
}); 

别的,我们可以给searchText 扩大四个$.trim()函数,制止误输入空格字符:

var searchText = $.trim($('#searchText').val());

末段,大家再给文本框扩充部分总结的HTML5元素

将 <input type=”text” />标签替换为 <input type=”search” />
(扩充了三个去除开关)

日增贰个autocomplete=”on”的品质,能够让浏览器预测字段输入

再充实四个占位符属性,placeholder=”举例:张三”

那些HTML5标签在分裂浏览器下,也许有不能的彰显效果,不过即便在ie6下,也不会潜移暗化搜索效果。

动态文字寻觅功用,暂且先写到那。

附完整代码:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>动态文字搜索</title> 
    <meta charset='utf-8' /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
      $(function(){ 
        $('#userForm').on('input propertychange', '#searchText', function(){ 
          var searchText = $.trim($('#searchText').val()); 
          cleanHighLight(); 
          if(searchText){ 
            $('#userForm').find('tbody tr').hide(); 
            var tds = $("td.userNameTd:contains("+ searchText +")"); 
            if(!!tds.html()) { 
              tds.html(tds.html().replace(searchText,''+searchText+'')); 
            } 
            tds.parent('tr').show(); 
          } else { 
            $('#userForm').find('tbody tr').show(); 
          } 

        }); 
      }); 
      function cleanHighLight() { 
        var tds = $('span.bg-y').parent(); 
        var vSearchText = $('span.bg-y').html(); 
        if(!!tds.html()){ 
          tds.html(tds.html().replace(''+vSearchText+'', vSearchText)); 
        } 
      } 
    </script> 
  </head> 
  <style type="text/css"> 
    table{ 
      border-collapse:collapse; 
      text-align: center; 
    } 
    table, th, td{ 
      border: 1px solid black; 
    } 
    .bg-y{ 
      background-color: yellow; 
    } 
  </style> 
  <body> 
    <div id="container"> 
      <form name="userForm" id="userForm"> 
        <table> 
          <thead> 
            <tr> 
              <th colspan="3"> 
                <input type="search" id="searchText" autocomplete="on"/> 
              </th> 
            </tr> 
            <tr> 
              <th> </th> 
              <th> </th> 
              <th>姓名:</th> 
            </tr> 
          </thead> 
          <tbody> 
            <tr> 
              <td>1</td> 
              <td> 
                <input type="checkbox" name="userId" value="05cacc57-cb8a-4ba7-a928-1d49a0f0cfc0"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>2</td> 
              <td> 
                <input type="checkbox" name="userId" value="111111111111111111111111111111111111"> 
              </td> 
              <td class="userNameTd">默认</td> 
            </tr> 
            <tr> 
              <td>3</td> 
              <td> 
                <input type="checkbox" name="userId" value="403b76a5-22f9-470c-8d9c-d0becca9ff3d"> 
              </td> 
              <td class="userNameTd">管理员5</td> 
            </tr> 
            <tr> 
              <td>4</td> 
              <td> 
                <input type="checkbox" name="userId" value="49adbf34-d9bc-4f5c-b440-cad07913afa1"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>5</td> 
              <td> 
                <input type="checkbox" name="userId" value="52dbff4d-976b-4e92-8b83-25b1fd4fe8c4"> 
              </td> 
              <td class="userNameTd">admin4real</td> 
            </tr> 
            <tr> 
              <td>6</td> 
              <td> 
                <input type="checkbox" name="userId" value="6148129f-6682-41a5-b097-28d02e804a69"> 
              </td> 
              <td class="userNameTd">admin7</td> 
            </tr> 
            <tr> 
              <td>7</td> 
              <td> 
                <input type="checkbox" name="userId" value="7bfbbf24-7f4a-4733-90d2-58b4611c3916"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>8</td> 
              <td> 
                <input type="checkbox" name="userId" value="8e2e427c-edf7-40e3-bcc1-18430549ca80"> 
              </td> 
              <td class="userNameTd">admin3</td> 
            </tr> 
            <tr> 
              <td>9</td> 
              <td> 
                <input type="checkbox" name="userId" value="91072894-0c0c-43f8-b294-bbe1990531df"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>10</td> 
              <td> 
                <input type="checkbox" name="userId" value="9199bd7b-0861-4bcc-9c8c-7c8c938d41c0"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>11</td> 
              <td> 
                <input type="checkbox" name="userId" value="9200b2d4-79f3-4b71-a023-d67618ff0eba"> 
              </td> 
              <td class="userNameTd">admin2</td> 
            </tr> 
            <tr> 
              <td>12</td> 
              <td> 
                <input type="checkbox" name="userId" value="a14cea40-02c3-479c-9ef0-d493d013c409"> 
              </td> 
              <td class="userNameTd">admin1Real</td> 
            </tr> 
            <tr> 
              <td>13</td> 
              <td> 
                <input type="checkbox" name="userId" value="b903ea21-95d6-4390-9832-f7de83a8b6ba"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>14</td> 
              <td> 
                <input type="checkbox" name="userId" value="badf02fe-e494-479c-922c-dfa5967d21fb"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>15</td> 
              <td> 
                <input type="checkbox" name="userId" value="cc100fe0-65c9-41a2-95e2-612f4d18f6fd"> 
              </td> 
              <td class="userNameTd">张三</td> 
            </tr> 
            <tr> 
              <td>16</td> 
              <td> 
                <input type="checkbox" name="userId" value="cd2e596b-5b45-4f08-a3c2-d95f7397003a"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>17</td> 
              <td> 
                <input type="checkbox" name="userId" value="d00d125f-95a6-4fb4-b209-a283773ddfd6"> 
              </td> 
              <td class="userNameTd">管理员5</td> 
            </tr> 
            <tr> 
              <td>18</td> 
              <td> 
                <input type="checkbox" name="userId" value="fe76629d-d24d-4296-be05-bf2897f67066"> 
              </td> 
              <td class="userNameTd">ADMIN124</td> 
            </tr> 
          </tbody> 
        </table> 
      </form> 
    </div> 
  </body> 
</html> 

以上便是本文的全体内容,希望本文的剧情对大家的上学或许办事能拉动一定的救助,同期也愿意多多帮助脚本之家!

你大概感兴趣的文章:

  • 依赖jQuery达成动态找寻展现效果
  • 据他们说jQuery实现页面搜索功效
  • jquery
    ztree落成模糊寻觅成效
  • 依照jQuery落成搜索关键字自动相配成效
  • 利用jQuery轻巧完结模拟浏览器寻找效果
  • jquery仿搜索自动联想成效代码
  • Jquery实现寻找框提醒意义示例代码
  • 依靠jquery达成的切近百度寻觅的输入框自动完结功用
  • jquery
    模拟类搜索框自动完结找寻提醒作用(创新)
  • asp.net下使用jQuery.AutoComplete完结仿Tmall商品寻找自动达成作用(革新了键盘上下选择体验)

相关文章