cari

Rumah >hujung hadapan web >tutorial js >Contoh analisis fungsi penapisan kandungan jadual berdasarkan jquery_jquery

Contoh analisis fungsi penapisan kandungan jadual berdasarkan jquery_jquery

WBOY
WBOYasal
2016-05-16 09:00:172435semak imbas

Apabila terdapat banyak data dalam jadual dan kami tidak dapat mencari halaman demi halaman, kami boleh mencari melalui kotak carian.

Untuk kotak carian ini, untuk pengalaman yang lebih baik, kami boleh menggunakan acara keyup untuk mula menapis apabila pengguna menaip, bukannya mengklik butang carian selepas melengkapkan pengisian.
Rendering:

Kod pelaksanaan: 

<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>

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan jquery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang program_jquery pemprosesan dokumen jQueryArtikel seterusnya：Penjelasan terperinci tentang program_jquery pemprosesan dokumen jQuery

Artikel berkaitan

Lihat lagi