Rumah > Artikel > pembangunan bahagian belakang > 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

PHPzasal: 2023-04-26 18:00:522658semak imbas

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!

JavaScript html 对象 dom

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：Dari halaman web kepada imej: tukar html kepada imejArtikel seterusnya：Dari halaman web kepada imej: tukar html kepada imej

Artikel berkaitan

Lihat lagi