如何过滤/搜索表格

学习如何使用 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

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလေ့လာပါ

အသုံးပြုနိုင် အော်ဂန်း အော်ဂန်း အုပ်ချုပ်ခြင်း အော်ဂန်း ထုတ်လုပ်ခြင်း

ပထမပွဲ - အခြေခံ အဆိုး ထပ်ထည့်ခြင်း:

<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>

ဒုတိယပွဲ - အဆိုး ထပ်ထည့်ခြင်း:

အသုံးပြုရာ အဖွဲ့ နှင့် အော်ဂန်း အုပ်ချုပ်ခြင်း:

#myInput {
  background-image: url('/css/searchicon.png'); /* တည်ထားရာ အောက်တွင် ရှာဖွေရေး ပုံ ထိန်းချိ */
  background-position: 10px 12px; /* ပုံ အစားအထား 10 ပေါက် 12 ပေါက် */
  background-repeat: no-repeat; /* ပုံ ချဲ့ခြင်း မပြန်ပြောင်း */
  width: 100%; /* အရှည် 100% */
  font-size: 16px; /* အကြီးအထန်း 16 ပေါက် */
  padding: 12px 20px 12px 40px; /* အတွင်းအဝ အဆင်း 12 ပေါက် 20 ပေါက် 12 ပေါက် 40 ပေါက် ပေါင်းစပ် */
  border: 1px solid #ddd; /* ရောင်းမြုတ် အဆိုး 1 ပေါက် ဖြတ်တိုက် */
  margin-bottom: 12px; /* တည်ထားရာ အောက်တွင် အဆင်း 12 ပေါက် ပေါင်းစပ် */
}
#myTable {
  border-collapse: collapse; /* အဆိုး ပေါင်းစပ်ခြင်း */
  width: 100%; /* အရှည် 100% */
  border: 1px solid #ddd; /* ရောင်းမြုတ် အဆိုး 1 ပေါက် ဖြတ်တိုက် */
  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;
}

သုံးပုံနှစ် - ဂျာနယူးမာရီ ထပ်ထည့်ပါ

<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]。

相关页面

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