Menggunakan JavaScript untuk melaksanakan fungsi penapisan jadual

Gunakan JavaScript untuk melaksanakan fungsi penapisan jadual

Dengan perkembangan berterusan teknologi Internet, jadual telah menjadi cara biasa untuk memaparkan data pada halaman web. Walau bagaimanapun, apabila jumlah data adalah besar, pengguna sering menghadapi kesukaran untuk mencari data tertentu. Oleh itu, menambah fungsi penapisan pada jadual supaya pengguna dapat mencari data yang diperlukan dengan cepat telah menjadi keperluan untuk banyak reka bentuk web. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi penapisan jadual.

Pertama, kita perlu mempunyai jadual data. Berikut ialah contoh mudah:

<table id="data-table">
  <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>王五</td>
      <td>28</td>
      <td>男</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

Seterusnya, kami memerlukan kotak input untuk pengguna memasukkan syarat penapis. Gunakan kod berikut untuk menambah kotak input:

<input type="text" id="filter-input" placeholder="输入筛选条件">

Kemudian, kita perlu menulis kod JavaScript untuk melaksanakan fungsi penapisan jadual. Kodnya adalah seperti berikut:

// 获取数据表格和筛选输入框
const table = document.querySelector('#data-table');
const filterInput = document.querySelector('#filter-input');

// 监听筛选输入框的输入事件
filterInput.addEventListener('input', () => {
  const filterValue = filterInput.value.toLowerCase(); // 获取输入框的值并转为小写

  // 获取表格中的所有行
  const rows = table.getElementsByTagName('tr');

  // 遍历表格中的每一行，并根据筛选条件显示/隐藏行
  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    const dataCells = row.getElementsByTagName('td');
    let shouldShowRow = false;

    // 遍历当前行的每个单元格，检查是否有匹配的值
    for (let j = 0; j < dataCells.length; j++) {
      const cell = dataCells[j];
      const cellValue = cell.textContent.toLowerCase();

      // 如果单元格的值与筛选条件匹配，显示该行
      if (cellValue.includes(filterValue)) {
        shouldShowRow = true;
      }
    }

    // 根据shouldShowRow的值，显示/隐藏行
    if (shouldShowRow) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  }
});

Kini, apabila pengguna memasukkan syarat penapis dalam kotak input, jadual akan menunjukkan/menyembunyikan baris yang sepadan berdasarkan syarat.

Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi penapisan jadual. Dengan menambahkan kotak input penapis dan menulis kod JavaScript yang sepadan, kami boleh memudahkan pengguna mencari data tertentu dalam jadual. Ini mempunyai nilai praktikal yang hebat untuk paparan data dan pertanyaan jadual besar. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Menggunakan JavaScript untuk melaksanakan fungsi penapisan jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!