Membuat Filter Pada Tabel Menggunakan Javascript
Halo teman-teman Source Code Aplikasi. Kembali lagi dengan saya Shelli Ripati di Kursus Website. Kali ini saya akan membnahas mengenai cara Membuat Filter Pada Tabel Menggunakan Javascript. Dimana dengan javascript dapat mencari data pada sebuah tabel.
Oke, langkah pertama-tama bagi Membuat Filter Pada Tabel Menggunakan Javascript yaitu kita bikin tabelnya terlebih dahulu di pada 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> Membangun Filter Di Tabel Menggunakan Javascript </h2>
<input type=text id=myInput onkeyup=myFunction() placeholder=Search for names.. title=Membangun Filter Di Tabel Menggunakan Javascript>
<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>
Apabila telah 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 bikin javascript bagi merancang manfaat 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 dapat seketika jalankan di browser masing-masing. Karenanya tampilannya akan seperti di gambar di bawah ini.
Dan sekiranya teman-teman search karenanya data di pada tabel akan tampil sesuai yang teman-teman search.
Demikian artikel mengenai cara Membuat Filter Pada Tabel Menggunakan Javascript. Semoga Bermanfaat dan selamat mencoba ya.
Sumber https://kursuswebsite.org
