Beranda
Javascript

Cara Membuat Pencarian Data Table Dengan JavaScript

Membuat Fungsi Search dengan Javascript

Cara Membuat Pencarian Data Table Dengan JavaScript

Bagi teman-teman yang belum mengetahui cara kerja dari event onkeyup tersebut akan saya jelaskan. onkeyup adalah event yang biasanya di pasang di dalam komponen input textbox. Cara kerja dari event tersebut adalah melakukan proses dari event tersebut dimana ketika teman-teman mengetikan suatu kata atau kalimat baik 1 maupun beberapa huruf di dalam komponen tersebut maka akan langsung dijalankan atau di proses untuk berlanjut ke proses selanjutnya. Cara kerjanya hampir sama dengan event-event yang lainnya, hanya saja dari masing-masing event tersebut berbeda waktu dalam menjalankan prosesnya. Atau seperti pada contoh umumnya yang mungkin sudah teman-teman tahu seperti event click dari komponen button, dimana event tersebut akan berjalan apabila teman-teman menekan tombol button tersebut. Jadi event onkeyup sama seperti event-event pada umunya, hanya saja untuk event onkeyup akan melakukan menjalankan proses ketika teman-teman mengetikan suatu huruf, kata atau kalimat di dalam komponen tersebut.

Berikut Tahapannya

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.php
  • Jika sudah ketikan kode seperti berikut



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Pencarian Data Table Dengan JavaScript</title>
</head>
<body>
<input type='text' id='input' onkeyup='searchTable()'>
<table id='table'>
<?php
   echo "<thead>
   <tr>
      <th>Nama</th>
      <th>Jenis Kelamin</th>
   </tr>
   </thead>
   <tbody>
   <tr>
      <td>Rindi</td>
      <td>Wanita</td>
   </tr>
   <tr>
      <td>Gofur</td>
      <td>Pria</td>
   </tr>
   <tr>
      <td>Faiqunnuha</td>
      <td>Pria</td>
   </tr>
   </tbody>";
?>
</table>
</body>
<script>
function searchTable() {
    var input;
    var saring;
    var status; 
    var tbody; 
    var tr; 
    var td;
    var i; 
    var j;
    input = document.getElementById("input");
    saring = input.value.toUpperCase();
    tbody = document.getElementsByTagName("tbody")[0];;
    tr = tbody.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(saring) > -1) {
                status = true;
            }
        }
        if (status) {
            tr[i].style.display = "";
            status = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>
</html>
  • Jika sudah save file tersebut dan lihat hasilnya di browser teman-teman

Sampai disini penjelasan saya mengenai cara membuat pencarian data table dengan JavaScript, semoga bermanfaat.

Posting Komentar