前端处理查询

最新推荐文章于 2024-03-19 14:17:30 发布

伏特加的滋味

最新推荐文章于 2024-03-19 14:17:30 发布

阅读量1.7k

点赞数

分类专栏： javaScript/jquery

本文链接：https://blog.csdn.net/yuanyuan214365/article/details/72664962

版权

javaScript/jquery 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

目的：查询不是通过后台数据库进行查询而是通过前端进行控制

原理：前端页面控制其显示和隐藏

例子代码：

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="utf-8">
</head>
<body>
  
   <div colspan="3">
      <input type="text" id="querytxt">
      <input type="button" id="ss" value="搜索" style="margin-left: 50px;"/>
   </div>

   <table>
    <thead>
      <tr><th>姓名</th><th>性别</th><th>籍贯</th></tr>
   </thead>
   <tbody>
      <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
      <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
      <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
      <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
      <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
      <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
      <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>
   </tbody>
</table>
  <script src="jquery.min.js"></script> 
  <script type="text/javascript">
  $(function(){
     $('#ss').click(function(){
        var sstxt=$('#querytxt').val();
        $("table tbody tr")
              .hide()
              .filter(":contains('"+sstxt+"')")
              .show();
     })

  })
</script>
</body>
</html>