pembangunan bahagian belakang
Golang
Cara menggunakan pertanyaan bersyarat dalam HTML untuk mencapai carian pantas dan paparan data
Cara menggunakan pertanyaan bersyarat dalam HTML untuk mencapai carian pantas dan paparan data
=
HTML (Hypertext Markup Language) ialah bahasa pengeluaran halaman web asas dan salah satu kandungan asas yang membentuk halaman web. Pertanyaan bersyarat ialah cara untuk mendapatkan data yang memenuhi keperluan dengan menanyakan syarat tertentu. Artikel ini akan memperkenalkan cara menggunakan pertanyaan bersyarat dalam HTML untuk mencapai carian pantas dan paparan data.
1. Peranan pertanyaan bersyarat HTML
Apabila membuat halaman web, selalunya perlu memaparkan sejumlah besar kandungan, seperti maklumat produk, laporan berita, pengenalan peribadi, dsb. Jika semua maklumat dipaparkan pada satu halaman, ia bukan sahaja membazir ruang, malah menyusahkan pengguna dalam mencari maklumat yang mereka perlukan. Oleh itu, adalah perlu untuk membenamkan fungsi pertanyaan bersyarat dalam halaman web supaya pengguna hanya boleh memaparkan sebahagian daripada maklumat yang memenuhi keperluan mereka.
2. Kaedah pertanyaan bersyarat dalam HTML
Cara biasa untuk melaksanakan pertanyaan bersyarat ialah menggunakan JavaScript. Dengan menggunakan DOM (Model Objek Dokumen) dalam JavaScript, fungsi pertanyaan boleh dibenamkan dengan mudah dalam halaman HTML. Berikut ialah halaman HTML asas:
<!DOCTYPE html>
<html>
<head>
<title>HTML 条件查询</title>
</head>
<body>
<input type="text" id="inputText">
<button onclick="search()">搜索</button>
<ul id="searchResult">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
<li>搜索结果4</li>
<li>搜索结果5</li>
</ul>
<script>
function search() {
var inputText = document.getElementById("inputText").value;
var searchResult = document.getElementById("searchResult");
for (var i = 0; i < searchResult.childNodes.length; i++) {
var text = searchResult.childNodes[i].textContent;
if (text.indexOf(inputText) == -1) {
searchResult.childNodes[i].style.display = "none";
} else {
searchResult.childNodes[i].style.display = "";
}
}
}
</script>
</body>
</html>Kod di atas melaksanakan fungsi pertanyaan bersyarat asas. Pengguna boleh memasukkan kata kunci dalam kotak teks dan kemudian klik butang "Cari", dan halaman akan memaparkan hanya hasil carian yang mengandungi kata kunci.
3. Aplikasi lanjutan pertanyaan bersyarat HTML
Selain fungsi pertanyaan asas, pertanyaan bersyarat HTML juga boleh digunakan pada senario yang lebih kompleks. Sebagai contoh, apabila memaparkan maklumat produk, pengguna boleh memaparkan maklumat produk yang berbeza mengikut keperluan yang berbeza. Berikut ialah contoh mudah:
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
</head>
<body>
<select id="productType">
<option value="all">全部商品</option>
<option value="book">图书</option>
<option value="music">音乐</option>
<option value="movie">电影</option>
</select>
<ul id="productList">
<li data-type="book">图书1</li>
<li data-type="book">图书2</li>
<li data-type="music">音乐1</li>
<li data-type="music">音乐2</li>
<li data-type="movie">电影1</li>
<li data-type="movie">电影2</li>
</ul>
<script>
function showProducts() {
var productType = document.getElementById("productType").value;
var productList = document.getElementById("productList");
for (var i = 0; i < productList.childNodes.length; i++) {
var type = productList.childNodes[i].getAttribute("data-type");
if (productType == "all" || productType == type) {
productList.childNodes[i].style.display = "";
} else {
productList.childNodes[i].style.display = "none";
}
}
}
document.getElementById("productType").addEventListener("change", showProducts);
</script>
</body>
</html>Kod di atas melaksanakan fungsi memaparkan maklumat produk yang berbeza berdasarkan jenis produk. Pengguna boleh memilih "Semua Produk," "Buku," "Muzik" atau "Filem" daripada menu lungsur dan halaman akan memaparkan produk jenis itu sahaja.
Ringkasan:
Pertanyaan bersyarat HTML ialah cara yang berkesan untuk mencari dan memaparkan data halaman, yang boleh meningkatkan pengalaman pengguna dan kecekapan halaman web. Melalui kaedah aplikasi asas dan lanjutan yang diperkenalkan dalam artikel ini, anda boleh mempunyai pemahaman yang lebih mendalam dan aplikasi pertanyaan bersyarat HTML.
Atas ialah kandungan terperinci Cara menggunakan pertanyaan bersyarat dalam HTML untuk mencapai carian pantas dan paparan data. 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
Apakah kelemahan debian openssl
Apr 02, 2025 am 07:30 AM
OpenSSL, sebagai perpustakaan sumber terbuka yang digunakan secara meluas dalam komunikasi yang selamat, menyediakan algoritma penyulitan, kunci dan fungsi pengurusan sijil. Walau bagaimanapun, terdapat beberapa kelemahan keselamatan yang diketahui dalam versi sejarahnya, yang sebahagiannya sangat berbahaya. Artikel ini akan memberi tumpuan kepada kelemahan umum dan langkah -langkah tindak balas untuk OpenSSL dalam sistem Debian. Debianopenssl yang dikenal pasti: OpenSSL telah mengalami beberapa kelemahan yang serius, seperti: Kerentanan Pendarahan Jantung (CVE-2014-0160): Kelemahan ini mempengaruhi OpenSSL 1.0.1 hingga 1.0.1f dan 1.0.2 hingga 1.0.2 versi beta. Penyerang boleh menggunakan kelemahan ini untuk maklumat sensitif baca yang tidak dibenarkan di pelayan, termasuk kunci penyulitan, dll.
Bagaimana anda menggunakan alat PPROF untuk menganalisis prestasi GO?
Mar 21, 2025 pm 06:37 PM
Artikel ini menerangkan cara menggunakan alat PPROF untuk menganalisis prestasi GO, termasuk membolehkan profil, mengumpul data, dan mengenal pasti kesesakan biasa seperti CPU dan isu memori.
Bagaimana anda menulis ujian unit di GO?
Mar 21, 2025 pm 06:34 PM
Artikel ini membincangkan ujian unit menulis di GO, meliputi amalan terbaik, teknik mengejek, dan alat untuk pengurusan ujian yang cekap.
Perpustakaan apa yang digunakan untuk operasi nombor terapung di GO?
Apr 02, 2025 pm 02:06 PM
Perpustakaan yang digunakan untuk operasi nombor terapung dalam bahasa Go memperkenalkan cara memastikan ketepatannya ...
Apakah masalah dengan thread giliran di crawler colly go?
Apr 02, 2025 pm 02:09 PM
Masalah Threading Giliran di GO Crawler Colly meneroka masalah menggunakan Perpustakaan Colly Crawler dalam bahasa Go, pemaju sering menghadapi masalah dengan benang dan permintaan beratur. � ...
Berubah dari front-end ke pembangunan back-end, adakah lebih menjanjikan untuk belajar Java atau Golang?
Apr 02, 2025 am 09:12 AM
Laluan Pembelajaran Backend: Perjalanan Eksplorasi dari Front-End ke Back-End sebagai pemula back-end yang berubah dari pembangunan front-end, anda sudah mempunyai asas Nodejs, ...
Bagaimana cara menentukan pangkalan data yang berkaitan dengan model dalam beego orm?
Apr 02, 2025 pm 03:54 PM
Di bawah rangka kerja beegoorm, bagaimana untuk menentukan pangkalan data yang berkaitan dengan model? Banyak projek beego memerlukan pelbagai pangkalan data untuk dikendalikan secara serentak. Semasa menggunakan beego ...
Apakah arahan Go FMT dan mengapa ia penting?
Mar 20, 2025 pm 04:21 PM
Artikel ini membincangkan perintah Go FMT dalam pengaturcaraan GO, yang format kod untuk mematuhi garis panduan gaya rasmi. Ia menyoroti kepentingan GO FMT untuk mengekalkan konsistensi kod, kebolehbacaan, dan mengurangkan perdebatan gaya. Amalan terbaik untuk
