jquery melaksanakan borang carian-Soal Jawab bahagian hadapan-php.cn

jquery melaksanakan borang carian

PHPz

Lepaskan： 2023-05-24 22:23:06

asal

704 orang telah melayarinya

JQuery melaksanakan borang carian

Dalam aplikasi web, jadual ialah bentuk paparan data yang biasa. Apabila jumlah data adalah besar, selalunya perlu menambah fungsi carian untuk mencari data yang diperlukan dengan cepat. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi borang carian.

Kod HTML

Pertama, kita perlu menyediakan beberapa kod HTML, termasuk borang dan kotak input. Borang kami mengandungi maklumat seperti nama, umur, jantina dan kewarganegaraan.

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>国籍</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>中国</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
      <td>中国</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>40</td>
      <td>男</td>
      <td>美国</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>35</td>
      <td>女</td>
      <td>美国</td>
    </tr>
  </tbody>
</table>
<input type="text" id="myInput" placeholder="搜索">

Salin selepas log masuk

Kod JavaScript

Seterusnya, kita perlu menulis beberapa kod JavaScript. Kami akan menggunakan perpustakaan jQuery untuk memudahkan proses pengekodan. Pertama, kita perlu mendapatkan kotak input dan elemen jadual.

var input = $("#myInput");
var table = $("#myTable");

Salin selepas log masuk

Kemudian, kita perlu menambah pendengar acara untuk mencetuskan fungsi carian apabila menaip dalam kotak input.

input.on("keyup", function() {
  var value = $(this).val().toLowerCase(); // 获取输入框的值，并将其转换为小写字母
  table.find("tr").not(":first").filter(function() { // 找到表格中所有行（除第一行标题外）并过滤出与输入框中内容不匹配的行
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) // toggle方法根据匹配结果显示或隐藏行
  });
});

Salin selepas log masuk

Dalam kod ini, kami menggunakan kaedah jQuery on() untuk menambah pendengar acara. Apabila kotak input menyalakan acara keyup, kod akan mendapat nilai kotak input dan menukarkannya kepada huruf kecil. Kami kemudian menggunakan kaedah jQuery find() dan filter() untuk mencari kandungan yang sepadan, dan kaedah toggle() untuk menunjukkan atau menyembunyikan baris. Dalam contoh ini, kami menggunakan kaedah indexOf() untuk menyemak sama ada teks mengandungi istilah carian.

Kod Penuh

Berikut ialah kod HTML dan JavaScript yang lengkap:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery实现搜索表格</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="text" id="myInput" placeholder="搜索">
  <table id="myTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>国籍</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
        <td>中国</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
        <td>中国</td>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>40</td>
        <td>男</td>
        <td>美国</td>
      </tr>
      <tr>
        <td>Jane Doe</td>
        <td>35</td>
        <td>女</td>
        <td>美国</td>
      </tr>
    </tbody>
  </table>
  <script>
    var input = $("#myInput");
    var table = $("#myTable");
    input.on("keyup", function() {
      var value = $(this).val().toLowerCase();
      table.find("tr").not(":first").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Ringkasan

Penggunaan jQuery agak mudah untuk melaksanakan fungsi borang carian, dan hanya memerlukan menulis sejumlah kecil kod untuk melaksanakannya. Dengan menggunakan kaedah jQuery find(), filter() dan toggle() kami boleh mencari kandungan yang sepadan dengan mudah dan menunjukkan atau menyembunyikan baris.

Atas ialah kandungan terperinci jquery melaksanakan borang carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!