如何过滤/搜索表格

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

Lumikha ng talahanayan na maipasok

Unang hakbang - Magdagdag ng 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>

Ikalawa - Magdagdag ng CSS:

Itaas ang estilo ng elemento ng pag-input at ng talahanayan:

#myInput {
  background-image: url('/css/searchicon.png'); /* Magdagdag ng icon ng paghahanap sa input */
  background-position: 10px 12px; /* Lokasyon ng icon ng paghahanap */
  background-repeat: no-repeat; /* Hindi maulit ang imaheng icon */
  width: 100%; /* Buong lapad */
  font-size: 16px; /* Paglaki ng laki ng font */
  padding: 12px 20px 12px 40px; /* Magdagdag ng panig na espasyo */
  border: 1px solid #ddd; /* Magdagdag ng asul na gilid */
  margin-bottom: 12px; /* Magdagdag ng espasyo sa ilalim ng input */
}
#myTable {
  border-collapse: collapse; /* I-pagkakasunduan ng gilid */
  width: 100%; /* Buong lapad */
  border: 1px solid #ddd; /* Magdagdag ng asul na gilid */
  font-size: 18px; /* Magdagdag ng laki ng font */
}
#myTable th, #myTable td
  text-align: left; /* Itinama ang teksto sa kaliwa */
  padding: 12px; /* Magdagdag ng panig sa loob */
}
#myTable tr
  /* Magdagdag ng ibabaw na baryante sa lahat ng linya ng talahanayan */
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover
  /* Magdagdag ng asul na kulay ng background sa ulo ng talahanayan at sa panahon na nasa mouse hover */
  background-color: #f1f1f1;
}

Tatlong hakbang - Magdagdag ng JavaScript:

<script>
function myFunction() {
  // Pagdeklara ng mga variable
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // Paglalapit sa lahat ng linya ng talahanayan, at itago ang mga linya na hindi tumutugma sa search query
  para (i = 0; i < tr.length; i++)
    td = tr[i].getElementsByTagName("td")[0];
    kung td
      txtValue = td.textContent || td.innerText;
      kung txtValue.toUpperCase().indexOf(filter) > -1
        tr[i].style.display = "";
      }
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

Subukan nang personal

Paalaala:Kung gusto mong gawin ang search na may pagkakaiba ng laki ng titik, alisin toUpperCase().

Paalaala:Kung gusto mong hanapin ang bansa (index 1) sa halip ng 'pangalan' (index 0), i-set sa tr[i].getElementsByTagName('td')[0] 更改为 [1]。

相关页面

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