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