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