jQuery实现对表格内容的模糊查询

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<title></title>  
<link href="css/style.css" mce_href="css/style.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="D:/Demo/jquery-1.8.0.js"></script>  
  
<script type="text/javascript">  
    
    $().ready(function(){  
      $("#txtName").keyup(  
        function(){            
          $("table tr:gt(0)").hide();  
          var $d = $("table tr:gt(0)").filter(":contains('"+$.trim($("#txtName").val())+"')");  
          $d.show();            
        }  
      )  
    })  
      
  </script>  
  
 </head>  
<body>  
<p><strong>实现动态列表内容查询</strong></p>  
<div>  
    <input type="text" id="txtName" />  
  </div>  
  <br />  
 <table width="438" height="auto" border="1">  
   <tr>  
     <td>编号</td>  
     <td>名称</td>  
     <td>类别</td>  
     <td>著作</td>  
   </tr>  
   <tr>  
     <td>1001</td>  
     <td>天龙八部</td>  
     <td>武侠</td>  
     <td>金庸</td>  
   </tr>  
          <tr>  
     <td>1002</td>  
     <td>小李飞刀</td>  
     <td>武侠</td>  
     <td>古龙</td>  
   </tr>  
      <tr>  
     <td>1003</td>  
     <td>逆水寒</td>  
     <td>言情</td>  
     <td>温瑞安</td>  
   </tr>  
      <tr>  
     <td>1004</td>  
     <td>天涯明月刀</td>  
     <td>武侠</td>  
     <td>古龙</td>  
   </tr>  
      <tr>  
     <td>1005</td>  
     <td>朝天一棍</td>  
     <td>武侠</td>  
     <td>温瑞安</td>  
   </tr>  
      <tr>  
     <td>1006</td>  
     <td>侠骨丹心</td>  
     <td>武侠</td>  
     <td>梁羽生</td>  
   </tr>  
      <tr>  
     <td>1007</td>  
     <td>神雕侠侣</td>  
     <td>武侠</td>  
     <td>金庸</td>  
   </tr>  
      <tr>  
     <td>1008</td>  
     <td>陆小凤传奇</td>  
     <td>武侠</td>  
     <td>古龙</td>  
   </tr>  
      <tr>  
     <td>1009</td>  
     <td>xxxxx</td>  
     <td>xxxxx</td>  
     <td>xxxxx</td>  
   </tr>  
 </table>  
</body>  
</html> 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于jQuery和layui的表格模糊查询的示例代码: HTML代码: ```html <div class="layui-form-item"> <div class="layui-input-inline"> <input type="text" name="search" placeholder="输入关键字" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">搜索</button> </div> </div> <table class="layui-hide" id="table" lay-filter="table"></table> ``` JS代码: ```js // 初始化表格 layui.use('table', function() { var table = layui.table; table.render({ elem: '#table', url: '/api/data', page: true, cols: [ [ { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: '姓名', width: 120 }, { field: 'age', title: '年龄', width: 80 }, { field: 'gender', title: '性别', width: 80 }, { field: 'email', title: '邮箱', minWidth: 200 } ] ] }); // 监听搜索按钮 form.on('submit(search)', function(data){ var keyword = data.field.search; table.reload('table', { where: { search: keyword } }); return false; }); }); ``` 后端API接口代码: ```php // 获取数据 $data = [ ['id' => 1, 'name' => '张三', 'age' => 18, 'gender' => '男', 'email' => 'zhangsan@qq.com'], ['id' => 2, 'name' => '李四', 'age' => 20, 'gender' => '女', 'email' => 'lisi@qq.com'], ['id' => 3, 'name' => '王五', 'age' => 22, 'gender' => '男', 'email' => 'wangwu@qq.com'], ['id' => 4, 'name' => '赵六', 'age' => 24, 'gender' => '女', 'email' => 'zhaoliu@qq.com'] ]; // 处理搜索参数 if(isset($_GET['search'])) { $keyword = $_GET['search']; $data = array_filter($data, function($item) use ($keyword) { return strpos($item['name'], $keyword) !== false || strpos($item['email'], $keyword) !== false; }); } // 返回数据 header('Content-Type: application/json'); echo json_encode([ 'code' => 0, 'msg' => '', 'count' => count($data), 'data' => $data ]); ``` 上述代码中,前端页面使用了layui的表格组件来展示数据,同时添加了一个搜索框和搜索按钮。当用户输入关键字并点击搜索按钮时,会向后端API接口发送请求并传递搜索参数。后端API接口会根据搜索参数过滤数据,并返回给前端页面展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值