jQuery实现对Table内容的模糊查询
jQuery实现对Table内容的模糊查询
lgscofield 发表于2年前
jQuery实现对Table内容的模糊查询
  • 发表于 2年前
  • 阅读 27
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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>
标签: jQuery filter table
共有 人打赏支持
lgscofield
粉丝 20
博文 105
码字总数 62676
×
lgscofield
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: