首页vns威尼斯城官网登入 › 实现代码vns威尼斯城官网登入:,这时可以通过一个搜索框来实现搜索

实现代码vns威尼斯城官网登入:,这时可以通过一个搜索框来实现搜索

jquery完结表格内容筛选,jquery表格筛选

对此表格来说,当数码比比较多的时候,我们鞭长莫及一页一页的查找,那时能够由此贰个探究框来促成寻觅。

对此那一个搜素框,大家为了更加好的心得能够应用keyup事件完结在用户输入的时候就起来筛选,实际不是填完现在点击寻觅按键再进行。

vns威尼斯城官网登入 1

 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="jquery-1.3.2.min.js"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            $("tr.parent").click(function () {
                $(this)
                .siblings('.child_'+this.id).toggle();

            });
            $("tr.parent").addClass("selected");
            $("#searchbox").keyup(function () {
                $("table tbody tr").hide()
                .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
            }).keyup();
        });
    </script>
    <title></title>
</head>
<body>
    <label>筛选</label>
    <input type="text" id="searchbox"/>
    <table>
        <thead>
            <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
        </thead>
        <tbody>
            <tr class="parent" id="row_01"><td>前台设计组</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="parent" id="row_02"><td>前台设计组</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="parent" id="row_03"><td>前台设计组</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
        </tbody>
    </table>
</body>
</html>

 

对于表格来讲,当数码非常多的时候,大家力所不及一页一页的找寻,这时能够经过多少个搜寻框来兑现搜...

依据jquery达成表格内容筛选效用实例分析,jquery表格

当表格内的数量相当多时,大家无可奈何一页一页的寻觅,那时能够透过三个寻觅框来实现寻找。

对此那个搜素框,我们为了越来越好的感受能够运用keyup事件完结在用户输入的时候就开始筛选,实际不是填完今后点击寻找按键再实践。
效果图:

vns威尼斯城官网登入 2

金镶玉裹福禄双全代码:

<html>
<head>
 <meta charset="utf-8" />
 <script src="jquery-1.3.2.min.js"></script>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script>
  $(function () {
   $("tr.parent").click(function () {
    $(this)
    .siblings('.child_'+this.id).toggle();

   });
   $("tr.parent").addClass("selected");
   $("#searchbox").keyup(function () {
    $("table tbody tr").hide()
    .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
   }).keyup();
  });
 </script>
 <title></title>
</head>
<body>
 <label>筛选</label>
 <input type="text" id="searchbox"/>
 <table>
  <thead>
   <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
  </thead>
  <tbody>
   <tr class="parent" id="row_01"><td>前台设计组</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="parent" id="row_02"><td>前台设计组</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="parent" id="row_03"><td>前台设计组</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
  </tbody>
 </table>
</body>
</html>

上述便是本文的全体内容,希望对大家学习jquery程序设计有所扶助。

当表格内的多少比较多时,大家鞭长莫及一页一页的找寻,那时能够经过一个探索框来落到实处搜...

<html>
<head>
 <meta charset="utf-8" />
 <script src="jquery-1.3.2.min.js"></script>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script>
  $(function () {
   $("tr.parent").click(function () {
    $(this)
    .siblings('.child_'+this.id).toggle();

   });
   $("tr.parent").addClass("selected");
   $("#searchbox").keyup(function () {
    $("table tbody tr").hide()
    .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
   }).keyup();
  });
 </script>
 <title></title>
</head>
<body>
 <label>筛选</label>
 <input type="text" id="searchbox"/>
 <table>
  <thead>
   <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
  </thead>
  <tbody>
   <tr class="parent" id="row_01"><td>前台设计组</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="parent" id="row_02"><td>前台设计组</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="parent" id="row_03"><td>前台设计组</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
  </tbody>
 </table>
</body>
</html>

对此那一个搜素框,咱们为了更加好的心得能够动用keyup事件完成在用户输入的时候就开端筛选,并不是填完以往点击寻找开关再进行。

 

你也许感兴趣的篇章:

  • 依靠JQuery的一句代码完毕表格的粗略筛选
  • 让您的CSS像Jquery一样做筛选的达成情势
  • JQuery操作表格(隔行着色,高亮呈现,筛选数据)
  • jQuery筛选器children()案例详解(图像和文字)
  • jquery表格内容筛选达成思路及代码
  • JQuery筛选器全种类介绍
  • Jquery仿Tmall京东多规格筛选可自动结合ajax加载示例
  • jquery遍历数组与筛选数组的形式
  • jquery遍历筛选数组的三种办法和遍历剖析json对象
  • jquery完毕多规格筛选特效代码分享
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="jquery-1.3.2.min.js"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            $("tr.parent").click(function () {
                $(this)
                .siblings('.child_'+this.id).toggle();

            });
            $("tr.parent").addClass("selected");
            $("#searchbox").keyup(function () {
                $("table tbody tr").hide()
                .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
            }).keyup();
        });
    </script>
    <title></title>
</head>
<body>
    <label>筛选</label>
    <input type="text" id="searchbox"/>
    <table>
        <thead>
            <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
        </thead>
        <tbody>
            <tr class="parent" id="row_01"><td>前台设计组</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="parent" id="row_02"><td>前台设计组</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="parent" id="row_03"><td>前台设计组</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
        </tbody>
    </table>
</body>
</html>

对于表格来讲,当数码相当多的时候,大家鞭长莫及一页一页的寻觅,这时能够由此二个追寻框来兑现搜索。

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=625

上一篇:

下一篇:

相关文章