CONTOH 002
Filter Table HTML (TableObject X5)
NAMA | KOTA | KODE POS | TELEPON |
RAHMADI | KUALA KURUN | 75845 | 08551679888 |
HANAFI | BANJARMASIN | 70232 | 08135263268 |
SAPRUDIN | SAMARINDA | 75253 | 08115250253 |
RIFANI | PONTIANAK | 77526 | 08125002525 |
QOLBY | PALANGKA RAYA | 72536 | 08195286253 |
ARDIANSYAH | BALIKPAPAN | 73882 | 08525263256 |
GAZALI | TENGGARONG | 72352 | 08152152468 |
MUHAMMAD HASBI | PANGKALAN BUN | 72522 | 08564865477 |
RUSYDIAN NOOR | KUALA KAPUAS | 74164 | 08316544447 |
ASNUR BAHRI | BATULICIN | 72158 | 08235625145 |
KHAIRI ANWAR | KOTABARFU | 71154 | 08964117520 |
MUHAMMAD RIWANDI | PELAIHARI | 72536 | 08652562526 |
ABDULLAH | TARAKAN | 78235 | 08510045823 |
HTML-1
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Suche nach Früchten ...">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 50%;
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>
HTML-2
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("imTableObject_39_01");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 1; 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>