HTML, CSS dan jQuery: Buat jadual data dengan fungsi carian
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 id="带有搜索功能的数据表格">带有搜索功能的数据表格</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>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;
}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)
});
});
});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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
