jQuery学习记录5

这次是 不刷新页面实现搜索功能和一个根据标签改变显示内容的小功能

1.搜索

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jQuery.js"> </script>
<script>
$(document).ready(function(){
    $("input").keyup(function(){
        if(!$(this).val()=="")
        {
        $("#my tbody tr").hide()
                         .filter(":contains('"+$(this).val()+"')").show();
        }
    }).keyup();
    
})
</script>
<style type="text/css">

</style>
</head>
<body>
<div>筛选：
  <label for="input"></label>
  <input type="text" name="input" id="input">
</div>
<table id="my" width="200" border="1">
  <tr>
    <th><div align="center">名字</div></th>
  </tr>
  <tbody>
  <tr>
    <td><div align="center">李</div></td>
  </tr>
  <tr>
    <td><div align="center">王</div></td>
  </tr>
  <tr>
    <td><div align="center">周</div></td>
  </tr>
  </tbody>
</table>
</body>

2 标签

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jQuery.js"> </script>
<script>
$(document).ready(function(){
    $("input").keyup(function(){
        if(!$(this).val()=="")
        {
        $("#my tbody tr").hide()
                         .filter(":contains('"+$(this).val()+"')").show();
        }
    }).keyup();
    
})
</script>
<style type="text/css">

</style>
</head>
<body>
<div>筛选：
  <label for="input"></label>
  <input type="text" name="input" id="input">
</div>
<table id="my" width="200" border="1">
  <tr>
    <th><div align="center">名字</div></th>
  </tr>
  <tbody>
  <tr>
    <td><div align="center">李</div></td>
  </tr>
  <tr>
    <td><div align="center">王</div></td>
  </tr>
  <tr>
    <td><div align="center">周</div></td>
  </tr>
  </tbody>
</table>
</body>

 

posted @ 2013-11-07 18:25  火火加油  阅读(136)  评论(0)  编辑  收藏  举报