Öncelikle arama yapmak için kullanacağımız aramakutusu etiketli bir metin giriş elementi oluşturalım. Ve bu elemente yazı yazıldığında tablo içinde arama yapabilmesi için onkeyup event ekleyelim.
<input type="text" id="aramakutusu" onkeyup="tabloarama()" placeholder="Ara...">
AranabilirTablo etiketine sahip 2 sütun ve 5 satırlı bir tablo oluşturalım. Bu sayıları istediğiniz şekilde değiştirebilirsiniz.
<table id="AranabilirTablo"> <tr><th>Başlık 1</th><th>Başlık 2</th></tr> <tr><td>lorem</td><td>ipsum</td></tr> <tr><td>dolor</td><td>sit</td></tr> <tr><td>amet</td><td>consectetur</td></tr> <tr><td>adipiscing</td><td>elit</td></tr> </table>
Son olarak script içerisinde fonksiyonu tanımlayalım.
<script>
function tabloarama() {
var e, t, n, a, l;
for (e = document.getElementById("aramakutusu").value.toUpperCase(), t = document.getElementById("AranabilirTablo").getElementsByTagName("tr"), l = 1; l < t.length; l++) {
t[l].style.display = "none", n = t[l].getElementsByTagName("td");
for (var m = 0; m < n.length; m++)
if ((a = t[l].getElementsByTagName("td")[m]) && a.innerHTML.toUpperCase().indexOf(e) > -1) {
t[l].style.display = "";
break
}
}
}
</script>
Önizleme
| İsim | Meslek |
|---|---|
| Hasan | Polis |
| Melike | Astronot |
| Nuray | Ev Hanımı |
| Esra | Sanatçı |
| Fatih | Futbolcu |
| Eren | Doktor |
| Mehmet | Öğretmen |
| Ayşe | Avukat |