Bootstrap过滤表格

沃梦达教程前端实例代码

1970-01-01

!DOCTYPE htmlhtmlheadtitleBootstrap Example/titlelink href = /bootstrap/css/bootstrap.min.css rel = stylesheet

编程学习网为您整理以下代码实例，主要实现：Bootstrap过滤表格，希望可以帮到各位朋友。

<!DOCTYPE HTML>
<HTML>
   <head>
      <Title>bootstrap Example</Title>
      <link href = "/bootstrap/CSS/bootstrap.min.CSS" rel = "stylesheet">
      <script src = "/scripts/jquery.min.Js"></script>
      <script src = "/bootstrap/Js/bootstrap.min.Js"></script>
   </head>
   <body>
      <div class = "container">
         <h2>Students Rank</h2>
         <input class = "form-control" ID = "demo" type = "text" placeholder = "Seach here,..">
         <br>
         <table class = "table table-bordered table-striped">
            <thead>
               <tr>
               <th>name</th>
               <th>Marks</th>
               <th>Rank</th>
               </tr>
            </thead>
            <tbody ID = "test">
               <tr>
                  <td>Amit</td>
                  <td>94</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Tom</td>
                  <td>90</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steve</td>
                  <td>88</td>
                  <td>3</td>
               </tr>
               <tr>
                  <td>Chris</td>
                  <td>80</td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>Corey</td>
                  <td>79</td>
                  <td>5</td>
               </tr>
               <tr>
                  <td>Glenn</td>
                  <td>75</td>
                  <td>6</td>
               </tr>
            </tbody>
         </table>
      </div>
      <script>
         $(document).ready(function(){
            $("#demo").on("keyup", function() {
               var value = $(this).val().tolowerCase();
               $("#test tr").filter(function() {
                  $(this).toggle($(this).text().tolowerCase().indexOf(value) > -1)
               });
            });
         });
      </script>
   </body>
</HTML>
@H_404_3@

沃梦达教程

本文标题为：Bootstrap过滤表格