Membuat Filter Pada Tabel Menggunakan Javascript

Halo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Website. Kali ini saya akan membnahas tentang cara Membuat Filter Pada Tabel Menggunakan Javascript. Dimana dengan javascript bisa mencari data dalam sebuah tabel.

Oke, langkah pertama untuk Membuat Filter Pada Tabel Menggunakan Javascript yaitu kita buat tabelnya terlebih dahulu di dalam html. Seperti script di bawah ini ya teman-teman.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2> Membuat Filter Pada Tabel Menggunakan Javascript </h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
<tr>
    <td>Shelli Ripati</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Shari</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Rifkie</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Prapti Hartini</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Chealsea Adriana</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Laura</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Jean Piere</td>
    <td>France</td>
  </tr>
</table>
</body>
</html>

Jika sudah kita lanjutkan ke style cssnya terlebih dahulu dan berikut scriptnya.

<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  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;
}
</style>

Dan langkah terakhir kita buat javascript untuk membuat fungsi filter/searchnya. Berikut scriptnya ya teman-teman.

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  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) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

Oke, teman-teman bisa langsung jalankan di browser masing-masing. Maka tampilannya akan seperti pada gambar di bawah ini.

Dan jika teman-teman search maka data di dalam tabel akan tampil sesuai yang teman-teman search.

Demikian artikel tentang cara Membuat Filter Pada Tabel Menggunakan Javascript. Semoga Bermanfaat dan selamat mencoba ya.

Membuat Filter Pada Tabel Menggunakan Javascript

Kategori