HTML, CSS dan jQuery: Buat jadual data dengan fungsi carian-tutorial js-php.cn

HTML, CSS dan jQuery: Buat jadual data dengan fungsi carian

WBOY

Lepaskan： 2023-10-26 10:03:29

asal

1000 orang telah melayarinya

HTML, CSS dan jQuery: Buat jadual data dengan fungsi carian

Dalam pembangunan web moden, jadual data ialah elemen yang kerap digunakan. Untuk memudahkan pengguna mencari dan menapis data, menambah fungsi carian pada jadual data telah menjadi fungsi penting. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta jadual data dengan fungsi carian, dan menyediakan contoh kod khusus.

1. Struktur HTML

Pertama, kita perlu mencipta struktur HTML asas untuk menampung jadual data dan fungsi carian. Contoh kod HTML adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>带有搜索功能的数据表格</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>带有搜索功能的数据表格</h1>
  
  <input type="text" id="search-input" placeholder="输入关键字搜索">
  
  <table id="data-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>28</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Salin selepas log masuk

Kod di atas mencipta kotak input dan borang data Kotak input digunakan untuk memasukkan kata kunci untuk carian, dan kandungan borang data ialah senarai ringkas maklumat pekerja.

2. Gaya CSS

Berikut ialah kod contoh fail CSS untuk menambah gaya pada jadual data dan kotak carian:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
}

#search-input {
  width: 300px;
  height: 30px;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 5px;
}

#data-table {
  width: 100%;
  border-collapse: collapse;
}

#data-table th, #data-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

#data-table th {
  text-align: left;
}

#data-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

#data-table tbody tr:hover {
  background-color: #ddd;
}

Salin selepas log masuk

3 skrip jQuery

Akhir sekali, kami menggunakan jQuery untuk menulis skrip mudah untuk dilaksanakan. fungsi carian. Kodnya adalah seperti berikut:

$(document).ready(function() {
  $("#search-input").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#data-table tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Salin selepas log masuk

Kod di atas akan memantau acara input papan kekunci kotak input Setiap kali kandungan dimasukkan, baris jadual akan ditapis berdasarkan kata kunci, dan hanya baris yang mengandungi kata kunci akan dipaparkan. .

Setakat ini, kami telah menyelesaikan penciptaan jadual data dengan fungsi carian! Apabila pengguna memasukkan kata kunci dalam kotak input, hanya baris yang mengandungi kata kunci akan dipaparkan.

Ringkasnya, artikel ini menunjukkan cara membuat jadual data dengan fungsi carian melalui gabungan HTML, CSS dan jQuery. Melalui contoh ini, kita dapat melihat kuasa HTML, CSS dan jQuery, yang boleh menambah pelbagai kesan interaktif ke halaman web dengan mudah. Saya harap artikel ini akan membantu anda semasa membangunkan halaman web!

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Buat jadual data dengan fungsi carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!