如何过滤/搜索表格

学习如何使用 JavaScript 创建可过滤的表格。

过滤表格

如何使用 JavaScript 在表格中搜索特定数据。

Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France

ການທົດລອງຄັ້ງຂອງເຈົ້າ

ການສ້າງຕາຕະລາງທີ່ສາມາດກວດສອບໄດ້

ບາງທີທັງໝົດ - ການເພີ່ມ HTML:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

ບາງທີສອງ - ການເພີ່ມ CSS:

ການຈັດວິກິດການຂອງບັນດາປະກອບສຳພັນທີ່ເປັນສິ່ງຂອງຕາຕະລາງ

#myInput {
  background-image: url('/css/searchicon.png'); /* ການເພີ່ມພາບຄົ້ນຫາ */
  background-position: 10px 12px; /* ການຕັ້ງຕອນພາບ */
  background-repeat: no-repeat; /* ການບໍ່ສະເພາະສີນັບພາບ */
  width: 100%; /* ຂະໜາດທັງໝົດ */
  font-size: 16px; /* ການເພີ່ມຂະໜາດມວນສາມ */
  padding: 12px 20px 12px 40px; /* ການເພີ່ມສະໝອງພາຍໃນ */
  border: 1px solid #ddd; /* ການເພີ່ມຂະໜາດສີສີເຈັບ */
  margin-bottom: 12px; /* ການເພີ່ມສະຖານທີ່ຢູ່ດ້ານລຸ່ມ */
}
#myTable {
  border-collapse: collapse; /* ການລວມຂະໜາດກະບຽນ */
  width: 100%; /* ຂະໜາດທັງໝົດ */
  border: 1px solid #ddd; /* ການເພີ່ມຂະໜາດສີສີເຈັບ */
  font-size: 18px; /* ສະແດງລັດສີຫຼາຍ */
}
#myTable th, #myTable td {
  text-align: left; /* ສະແດງລັດສີຫຼາຍ */
  padding: 12px; /* ສະແດງລັດສີຫຼາຍ */
}
#myTable tr {
  /* ສະແດງລັດສີຫຼັງສີຫຼາຍ */
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
  /* ສະແດງລັດສີສີພາບສີຫຼີກຫຼາຍສີສີພາບສີຫຼີກຫຼາຍສີສີພາບ */
  background-color: #f1f1f1;
}

ບາງການສາມາດ - ສະເໜີ JavaScript：

<script>
function myFunction() {
  // ການຖະແຫຼງມທະວີບ
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // ການຫາສະໜາມຂອງຈຸດທີ່ບໍ່ຕົກຕ້ານກັບຄຳຫຼີກຫຼາຍ
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

ການທົດລອງຄັ້ງຂອງເຈົ້າ

ຄຳເຕືອນ：ຖ້າເຈົ້າຕ້ອງການຄົ້ນຫາຄວາມຫຼີກຫຼາຍຄຳຂອງຄຳສັບສຳນັກງານຫຼັກການຫຼີກຫຼາຍຄຳຂອງຄຳສັບ toUpperCase()。

ຄຳເຕືອນ：ຖ້າເຈົ້າຕ້ອງການຄົ້ນຫາປະເທດ（ບັນຫາ 1）ທັງໝົດບໍ່ແມ່ນ“ຊື່”（ບັນຫາ 0），ກະລຸນາ tr[i].getElementsByTagName('td')[0] 更改为 [1]。

相关页面

教程：如何过滤/搜索列表