JavaScript ile Arama Filtreleme fonksiyonu için bir örnek

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arama Tablosu</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.container {
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="searchBox" placeholder="Arama yapın..." onkeyup="searchTable()">
<button onclick="searchTable()">Ara</button>
</div>
<table id="drinkTable">
<tr>
<th>ID</th>
<th>Tarih</th>
<th>Firma</th>
<th>Şehir</th>
</tr>
<tr>
<td>1</td>
<td>01.09.2024</td>
<td>ÇORUM KUYU TANDIR KEBAP SALONU-İBRAHİM UYSAL</td>
<td>Antalya</td>
</tr>
<tr>
<td>2</td>
<td>02.06.2024</td>
<td>Bitlis KUYU TANDIR KEBAP SALONU-İBRAHİM UYSAL</td>
<td>İstanbul</td>
</tr>
<tr>
<td>3</td>
<td>03.03.2024</td>
<td>ANTALYA KUYU TANDIR KEBAP SALONU-İBRAHİM UYSAL</td>
<td>İzmir</td>
</tr>
<tr>
<td>4</td>
<td>04.12.2024</td>
<td>AYDAN ŞENER SALONU-METİN CEYLAN</td>
<td>Ankara</td>
</tr>
<tr>
<td>5</td>
<td>05.11.2024</td>
<td>CEYLAN OKEY SALONU-METİN CEYLAN</td>
<td>Bursa</td>
</tr>
<tr>
<td>6</td>
<td>06.07.2024</td>
<td>CEYLAN OKEY SALONU-METİN CEYLAN</td>
<td>Bolu</td>
</tr>
<tr>
<td>7</td>
<td>07.09.2024</td>
<td>DAYI KOKOREÇ-MUSTAFA YALÇIN</td>
<td>Konya</td>
</tr>
<tr>
<td>8</td>
<td>08.03.2024</td>
<td>DAYI KOKOREÇ-MUSTAFA YALÇIN</td>
<td>Gaziantep</td>
</tr>
<tr>
<td>9</td>
<td>09.05.2024</td>
<td>BABA KOKOREÇ-SEMİH YALÇIN</td>
<td>Aydın</td>
</tr>
<tr>
<td>10</td>
<td>10.12.2024</td>
<td>FARMASİ-SELMA AYDIN</td>
<td>Burdur</td>
</tr>
</table>
<script>
function searchTable() {
const input = document.getElementById('searchBox');
const filter = input.value.toLowerCase(); // Arama filtresini küçük harfe çevir
const table = document.getElementById('drinkTable');
const tr = table.getElementsByTagName('tr');
// Tüm satırları kontrol et
for (let i = 1; i < tr.length; i++) { // 1'den başlıyoruz, çünkü ilk satır başlık
const td = tr[i].getElementsByTagName('td');
let rowContainsHighlight = false; // Satırda işaretleme olup olmadığını kontrol etmek için
// Her hücreyi kontrol et
for (let j = 1; j < td.length; j++) { // 1'den başlıyoruz, çünkü ilk hücre ID
if (td[j]) {
const txtValue = td[j].textContent || td[j].innerText;
// Arama filtresi ile hücre değeri arasında eşleşme kontrolü
if (txtValue.toLowerCase().startsWith(filter) && filter !== "") {
rowContainsHighlight = true; // Eğer hücrede arama değeri varsa, satırı işaretle
td[j].classList.add('highlight'); // Eşleşen hücreyi vurgula
} else {
td[j].classList.remove('highlight'); // Eşleşmiyorsa vurguyu kaldır
}
}
}
// Satırı gizleme: sadece işaretlenen hücrelerle ilişkilendiriliyor
if (!rowContainsHighlight) {
for (let j = 1; j < td.length; j++) { // İlk hücreyi atlayarak
td[j].classList.remove('highlight'); // Eşleşmiyorsa vurguyu kaldır
}
}
}
}
</script>
</body>
</html>

 

Related Posts

HTML CSS VE JS
  • Eylül 18, 2024

HTML, CSS ve JavaScript: Web Geliştirmenin Temel Taşları Web geliştirme, modern dünyada büyük bir önem kazanmış durumda ve bu alanda HTML, CSS ve JavaScript, web sitelerinin temel yapı taşlarını oluşturuyor.…

Daha Fazlası..

Devam et..

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Son Yazılar

    PHP Stored Procedure (Saklı Yordam)
      JavaScript ile Arama Filtreleme fonksiyonu için bir örnek
        Matematik de e Sayısı – Euler Sayısı “e” Tüm Detaylar
          Matematik de i harfinin önemini ve neden kullanıldığını öğrenelim
            Fonksiyonlar Ile Vize Final Ortalaması Alıyoruz.
              PHP de 4 işlem