Ö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 |