Advertisement
Guest User

الكود كامل لطريقة البحث داخل الجدول عن طريق الjquery

a guest
Apr 12th, 2014
193
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.62 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap 101 Template</title>
  8.  
  9.     <!-- Latest compiled and minified CSS -->
  10. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  11.  
  12. <!-- Optional theme -->
  13. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  14.  
  15.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  16.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  17.     <!--[if lt IE 9]>
  18.      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  19.      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  20.    <![endif]-->
  21.   </head>
  22.   <body>
  23.    <div class="input-group"> <span class="input-group-addon">Filter</span>
  24.  
  25.     <input id="filter" type="text" class="form-control" placeholder="Type here...">
  26. </div>
  27. <table class="table table-striped">
  28.     <thead>
  29.         <tr>
  30.             <th>Code</th>
  31.             <th>Name</th>
  32.             <th>Default</th>
  33.             <th>Status</th>
  34.         </tr>
  35.     </thead>
  36.     <tbody class="searchable">
  37.         <tr>
  38.             <td>EUR</td>
  39.             <td>EURO</td>
  40.             <td></td>
  41.             <td>Active</td>
  42.         </tr>
  43.         <tr>
  44.             <td>GBP</td>
  45.             <td>Pound</td>
  46.             <td></td>
  47.             <td>Active</td>
  48.         </tr>
  49.         <tr>
  50.             <td>GEL</td>
  51.             <td>Georgian Lari</td>
  52.             <td><span class="glyphicon glyphicon-ok"></span>
  53.             </td>
  54.             <td>Active</td>
  55.         </tr>
  56.         <tr>
  57.             <td>USD</td>
  58.             <td>US Dollar</td>
  59.             <td></td>
  60.             <td>Active</td>
  61.         </tr>
  62.     </tbody>
  63. </table>
  64.  
  65.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  66.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  67.     <!-- Latest compiled and minified JavaScript -->
  68. <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  69.  
  70. <script>
  71. $(document).ready(function () {
  72.  
  73.     (function ($) {
  74.  
  75.         $('#filter').keyup(function () {
  76.  
  77.             var rex = new RegExp($(this).val(), 'i');
  78.             $('.searchable tr').hide();
  79.             $('.searchable tr').filter(function () {
  80.                 return rex.test($(this).text());
  81.             }).show();
  82.  
  83.         })
  84.  
  85.     }(jQuery));
  86.  
  87. });
  88.  
  89. </script>
  90. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement