Tablo içinde metin arama işlevi eklemek, web sayfalarında kullanıcıların içerikleri hızlı ve etkili bir şekilde bulmalarına yardımcı olabilir. Bu işlevsellik, büyük tablolar içinde belirli bir metni arayan kullanıcılar için özellikle yararlı olabilir. HTML tablosunda metin arama yapmanın birkaç farklı yolu vardır, ancak ben JavaScript kullanarak dinamik olarak filtreleme yapmayı tercih ettim. İşte bunu yapan HTML kodu:
<!DOCTYPE html>
<html lang="tr">
<head>
<title>HTML Tablosunda Metin Arama Yapma</title>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
#tablo{
width: 100%;
border:1px solid #ddd;
border-collapse: collapse;
}
#tablo th, td{
text-align: left;
padding:10px;
}
#tablo tr{
border-bottom: 1px solid #ddd;
}
#tablo .header{
background-color: #f1f1f1;
}
#arama {
width: 100%;
margin-bottom: 20px;
padding:10px 20px 10px 20px;
border:1px solid #ddd;
}
</style>
</head>
<body>
<h1>ÜLKELER VE BAŞKENTLERİ</h1>
<input type="text" id="arama" onkeyup="aramayap()" placeholder="Aranacak Ülkeyi yazınız">
<table id="tablo">
<tr class="header">
<th>Ülke Adı</th>
<th>Başkent</th>
</tr>
<tr>
<td>Afganistan</td>
<td>Kabil</td>
</tr>
<tr>
<td>Almanya</td>
<td>Berlin</td>
</tr>
<tr>
<td>Amerika Birleşik Devletleri</td>
<td>Washington</td>
</tr>
<tr>
<td>Andora</td>
<td>Andora La Vella</td>
</tr>
<tr>
<td>Angola</td>
<td>Luanda</td>
</tr>
<tr>
<td>Arjantin</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Arnavutluk</td>
<td>Tiran</td>
</tr>
<tr>
<td>Avustralya</td>
<td>Kanberra</td>
</tr>
<tr>
<td>Avusturya</td>
<td>Viyana</td>
</tr>
<tr>
<td>Azerbaycan</td>
<td>Bakü</td>
</tr>
<tr>
<td>Bahama Adaları</td>
<td>Nassau</td>
</tr>
<tr>
<td>Bahreyn</td>
<td>Manama</td>
</tr>
<tr>
<td>Bangladeş</td>
<td>Dakka</td>
</tr>
<tr>
<td>Barbados</td>
<td>Bridgetown</td>
</tr>
<tr>
<td>Belçika</td>
<td>Brüksel</td>
</tr>
<tr>
<td>Belize</td>
<td>Belmopan</td>
</tr>
<tr>
<td>Benin</td>
<td>Porto-Novo</td>
</tr>
<tr>
<td>Beyaz Rusya</td>
<td>Minsk</td>
</tr>
<tr>
<td>Birleşik Arap Emirlikleri</td>
<td>Abu Dabi</td>
</tr>
<tr>
<td>Bolivya</td>
<td>La Paz</td>
</tr>
<tr>
<td>Bosna-Hersek</td>
<td>Saraybosna</td>
</tr>
<tr>
<td>Botsvana</td>
<td>Gaborone</td>
</tr>
<tr>
<td>Brezilya</td>
<td>Brasilia</td>
</tr>
<tr>
<td>Brunei</td>
<td>Bender Seri Begavan</td>
</tr>
<tr>
<td>Bulgaristan</td>
<td>Sofya</td>
</tr>
<tr>
<td>Burkina Faso</td>
<td>Uagadugu</td>
</tr>
<tr>
<td>Burundi</td>
<td>Bujumbura</td>
</tr>
<tr>
<td>Butan</td>
<td>Timbu</td>
</tr>
<tr>
<td>Cezayir</td>
<td>Cezayir</td>
</tr>
<tr>
<td>Cibuti</td>
<td>Cibuti</td>
</tr>
<tr>
<td>Çad</td>
<td>Encemine</td>
</tr>
<tr>
<td>Çek Cumhuriyeti</td>
<td>Prag</td>
</tr>
<tr>
<td>Çin</td>
<td>Pekin</td>
</tr>
<tr>
<td>Danimarka</td>
<td>Kopenhag</td>
</tr>
<tr>
<td>Demokratik Kongo Cumhuriyeti</td>
<td>Kinşasa</td>
</tr>
<tr>
<td>Doğu Timor</td>
<td>Dili</td>
</tr>
<tr>
<td>Dominik Cumhuriyeti</td>
<td>Santo Domingo</td>
</tr>
<tr>
<td>Dominika</td>
<td>Roseau</td>
</tr>
<tr>
<td>Ekvador</td>
<td>Kuito</td>
</tr>
<tr>
<td>Ekvator Ginesi</td>
<td>Malabo</td>
</tr>
<tr>
<td>El Salvador</td>
<td>San Salvador</td>
</tr>
<tr>
<td>Endonezya</td>
<td>Cakarta</td>
</tr>
<tr>
<td>Eritre</td>
<td>Asmara</td>
</tr>
<tr>
<td>Ermenistan</td>
<td>Erivan</td>
</tr>
<tr>
<td>Estonya</td>
<td>Tallinn</td>
</tr>
<tr>
<td>Etiyopya</td>
<td>Addis Ababa</td>
</tr>
<tr>
<td>Fas</td>
<td>Rabat</td>
</tr>
<tr>
<td>Fiji</td>
<td>Suva</td>
</tr>
<tr>
<td>Fildişi Sahili</td>
<td>Yamusukro</td>
</tr>
<tr>
<td>Filipinler</td>
<td>Manila</td>
</tr>
<tr>
<td>Finlandiya</td>
<td>Helsinki</td>
</tr>
<tr>
<td>Fransa</td>
<td>Paris</td>
</tr>
<tr>
<td>Gabon</td>
<td>Librevil</td>
</tr>
<tr>
<td>Gambiya</td>
<td>Banjul</td>
</tr>
<tr>
<td>Gana</td>
<td>Akra</td>
</tr>
<tr>
<td>Gine</td>
<td>Konakri</td>
</tr>
<tr>
<td>Gine Bissau</td>
<td>Bissau</td>
</tr>
<tr>
<td>Guatemala</td>
<td>Guatemala</td>
</tr>
<tr>
<td>Guyana</td>
<td>Georgetown</td>
</tr>
<tr>
<td>Güney Afrika</td>
<td>Pretoria</td>
</tr>
<tr>
<td>Güney Kore</td>
<td>Seul</td>
</tr>
<tr>
<td>Güney Sudan</td>
<td>Juba</td>
</tr>
<tr>
<td>Gürcistan</td>
<td>Tiflis</td>
</tr>
<tr>
<td>Haiti</td>
<td>Port-au-Prince</td>
</tr>
<tr>
<td>Hırvatistan</td>
<td>Zagreb</td>
</tr>
<tr>
<td>Hindistan</td>
<td>Yeni Delhi</td>
</tr>
<tr>
<td>Hollanda</td>
<td>Lahey</td>
</tr>
<tr>
<td>Honduras</td>
<td>Tegucigalpa</td>
</tr>
<tr>
<td>Irak</td>
<td>Bağdat</td>
</tr>
<tr>
<td>İngiltere (Birleşik Krallık)</td>
<td>Londra</td>
</tr>
<tr>
<td>İran</td>
<td>Tahran</td>
</tr>
<tr>
<td>İrlanda</td>
<td>Dublin</td>
</tr>
<tr>
<td>İspanya</td>
<td>Madrid</td>
</tr>
<tr>
<td>İsrail</td>
<td>Tel Aviv</td>
</tr>
<tr>
<td>İsveç</td>
<td>Stokholm</td>
</tr>
<tr>
<td>İsviçre</td>
<td>Bern</td>
</tr>
<tr>
<td>İtalya</td>
<td>Roma</td>
</tr>
<tr>
<td>İzlanda</td>
<td>Reykjavik</td>
</tr>
<tr>
<td>Jamaika</td>
<td>Kingston</td>
</tr>
<tr>
<td>Japonya</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Kamboçya</td>
<td>Phnom Penh</td>
</tr>
<tr>
<td>Kamerun</td>
<td>Yaounde</td>
</tr>
<tr>
<td>Kanada</td>
<td>Ottawa</td>
</tr>
<tr>
<td>Karadağ</td>
<td>Podgoritsa</td>
</tr>
<tr>
<td>Katar</td>
<td>Doha</td>
</tr>
<tr>
<td>Kazakistan</td>
<td>Astana</td>
</tr>
<tr>
<td>Kenya</td>
<td>Nairobi</td>
</tr>
<tr>
<td>Kırgızistan</td>
<td>Bişkek</td>
</tr>
<tr>
<td>Kiribati</td>
<td>Bairiki (Tarava)</td>
</tr>
<tr>
<td>Kolombiya</td>
<td>Bogota</td>
</tr>
<tr>
<td>Komorlar Birliği</td>
<td>Moroni</td>
</tr>
<tr>
<td>Kongo</td>
<td>Brazzavil</td>
</tr>
<tr>
<td>Kosova</td>
<td>Priştine</td>
</tr>
<tr>
<td>Kosta Rika</td>
<td>San Jose</td>
</tr>
<tr>
<td>Kuveyt</td>
<td>Kuveyt</td>
</tr>
<tr>
<td>Kuzey Kıbrıs Türk Cumhuriyeti</td>
<td>Lefkoşa</td>
</tr>
<tr>
<td>Kuzey Kore</td>
<td>Pyongyang</td>
</tr>
<tr>
<td>Küba</td>
<td>Havana</td>
</tr>
<tr>
<td>Laos</td>
<td>Vientian</td>
</tr>
<tr>
<td>Lesotho</td>
<td>Maseru</td>
</tr>
<tr>
<td>Letonya</td>
<td>Riga</td>
</tr>
<tr>
<td>Liberya</td>
<td>Monrovya</td>
</tr>
<tr>
<td>Libya</td>
<td>Trablus</td>
</tr>
<tr>
<td>Liechtenstein</td>
<td>Vaduz</td>
</tr>
<tr>
<td>Litvanya</td>
<td>Vilnius</td>
</tr>
<tr>
<td>Lübnan</td>
<td>Beyrut</td>
</tr>
<tr>
<td>Lüksemburg</td>
<td>Lüksemburg</td>
</tr>
<tr>
<td>Macaristan</td>
<td>Budapeşte</td>
</tr>
<tr>
<td>Madagaskar</td>
<td>Antananarivo</td>
</tr>
<tr>
<td>Makedonya</td>
<td>Üsküp</td>
</tr>
<tr>
<td>Malavi</td>
<td>Lilongve</td>
</tr>
<tr>
<td>Maldivler</td>
<td>Male</td>
</tr>
<tr>
<td>Malezya</td>
<td>Kuala Lumpur</td>
</tr>
<tr>
<td>Mali</td>
<td>Bamako</td>
</tr>
<tr>
<td>Malta</td>
<td>Valetta</td>
</tr>
<tr>
<td>Marşal Adaları</td>
<td>Majuro</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Port Louis</td>
</tr>
<tr>
<td>Meksika</td>
<td>Meksiko</td>
</tr>
<tr>
<td>Mısır</td>
<td>Kahire</td>
</tr>
<tr>
<td>Mikronezya</td>
<td>Palikir</td>
</tr>
<tr>
<td>Moğolistan</td>
<td>Ulanbator</td>
</tr>
<tr>
<td>Moldova</td>
<td>Kişinev</td>
</tr>
<tr>
<td>Monako</td>
<td>Monako</td>
</tr>
<tr>
<td>Moritanya</td>
<td>Nouakchott</td>
</tr>
<tr>
<td>Mozambik</td>
<td>Maputo</td>
</tr>
<tr>
<td>Myanmar</td>
<td>Naypyidaw</td>
</tr>
<tr>
<td>Namibya</td>
<td>Windhoek</td>
</tr>
<tr>
<td>Nauru</td>
<td>Yaren</td>
</tr>
<tr>
<td>Nepal</td>
<td>Katmandu</td>
</tr>
<tr>
<td>Nijer</td>
<td>Niamey</td>
</tr>
<tr>
<td>Nijerya</td>
<td>Abuja</td>
</tr>
<tr>
<td>Nikaragua</td>
<td>Managua</td>
</tr>
<tr>
<td>Norveç</td>
<td>Oslo</td>
</tr>
<tr>
<td>Orta Afrika Cumhuriyeti</td>
<td>Bangui</td>
</tr>
<tr>
<td>Özbekistan</td>
<td>Taşkent</td>
</tr>
<tr>
<td>Pakistan</td>
<td>İslamabad</td>
</tr>
<tr>
<td>Palau</td>
<td>Melekeok</td>
</tr>
<tr>
<td>Panama</td>
<td>Panama şehri</td>
</tr>
<tr>
<td>Papua Yeni Gine</td>
<td>Port-Moresby</td>
</tr>
<tr>
<td>Paraguay</td>
<td>Asunsion</td>
</tr>
<tr>
<td>Peru</td>
<td>Lima</td>
</tr>
<tr>
<td>Polonya</td>
<td>Varşova</td>
</tr>
<tr>
<td>Portekiz</td>
<td>Lizbon</td>
</tr>
<tr>
<td>Romanya</td>
<td>Bükreş</td>
</tr>
<tr>
<td>Ruanda</td>
<td>Kigali</td>
</tr>
<tr>
<td>Rusya</td>
<td>Moskova</td>
</tr>
<tr>
<td>Saint Kitts ve Nevis</td>
<td>Basseterre</td>
</tr>
<tr>
<td>Saint Lucia</td>
<td>Castries</td>
</tr>
<tr>
<td>Saint Vincent ve Grenadine Adaları</td>
<td>Kingstown</td>
</tr>
<tr>
<td>Samoa</td>
<td>Apia</td>
</tr>
<tr>
<td>San Marino</td>
<td>San Marino</td>
</tr>
<tr>
<td>Sao Tome ve Principe</td>
<td>Sao Tome</td>
</tr>
<tr>
<td>Senegal</td>
<td>Dakar</td>
</tr>
<tr>
<td>Seyşeller</td>
<td>Viktorya</td>
</tr>
<tr>
<td>Sırbistan</td>
<td>Belgrad</td>
</tr>
<tr>
<td>Sierra Leone</td>
<td>Freetown</td>
</tr>
<tr>
<td>Singapur</td>
<td>Singapur</td>
</tr>
<tr>
<td>Slovakya</td>
<td>Bratislava</td>
</tr>
<tr>
<td>Slovenya</td>
<td>Lubliyana</td>
</tr>
<tr>
<td>Solomon Adaları</td>
<td>Honiara</td>
</tr>
<tr>
<td>Somali</td>
<td>Mogadişu</td>
</tr>
<tr>
<td>Sri Lanka</td>
<td>Kolombo</td>
</tr>
<tr>
<td>Sudan</td>
<td>Hartum</td>
</tr>
<tr>
<td>Surinam</td>
<td>Paramaribo</td>
</tr>
<tr>
<td>Suriye</td>
<td>Şam</td>
</tr>
<tr>
<td>Suudi Arabistan</td>
<td>Riyad</td>
</tr>
<tr>
<td>Svaziland</td>
<td>Mbabane</td>
</tr>
<tr>
<td>Şili</td>
<td>Santiyago</td>
</tr>
<tr>
<td>Tacikistan</td>
<td>Duşanbe</td>
</tr>
<tr>
<td>Tanzanya</td>
<td>Darüsselam</td>
</tr>
<tr>
<td>Tayland</td>
<td>Bangkok</td>
</tr>
<tr>
<td>Togo</td>
<td>Lome</td>
</tr>
<tr>
<td>Tonga</td>
<td>Nuku'alofa</td>
</tr>
<tr>
<td>Trinidad ve Tobago</td>
<td>Port of Spain</td>
</tr>
<tr>
<td>Tunus</td>
<td>Tunus</td>
</tr>
<tr>
<td>Tuvalu</td>
<td>Funafuti</td>
</tr>
<tr>
<td>Türkiye</td>
<td>Ankara</td>
</tr>
<tr>
<td>Türkmenistan</td>
<td>Aşkabat</td>
</tr>
<tr>
<td>Uganda</td>
<td>Kampala</td>
</tr>
<tr>
<td>Ukrayna</td>
<td>Kiev</td>
</tr>
<tr>
<td>Umman</td>
<td>Muskat</td>
</tr>
<tr>
<td>Uruguay</td>
<td>Montevideo</td>
</tr>
<tr>
<td>Ürdün</td>
<td>Amman</td>
</tr>
<tr>
<td>Vanuatu</td>
<td>Port Vila</td>
</tr>
<tr>
<td>Venezuela</td>
<td>Karakas</td>
</tr>
<tr>
<td>Vietnam</td>
<td>Hanoi</td>
</tr>
<tr>
<td>Yemen</td>
<td>Sana</td>
</tr>
<tr>
<td>Yeni Zelanda</td>
<td>Wellington</td>
</tr>
<tr>
<td>Yeşil Burun Adaları</td>
<td>Praia</td>
</tr>
<tr>
<td>Yunanistan</td>
<td>Atina</td>
</tr>
<tr>
<td>Zambiya</td>
<td>Lusaka</td>
</tr>
<tr>
<td>Zimbabve</td>
<td>Harare</td>
</tr>
</table>
<script>
function aramayap() {
var aranacak, tablo, tr, x, arananyeni, deger;
aranacak=document.getElementById("arama");
arananyeni=aranacak.value.toUpperCase();
tablo=document.getElementById("tablo");
tr=tablo.getElementsByTagName("tr");
for(x=0;x<tr.length;x++) {
td=tr[x].getElementsByTagName("td")[0];
if(td) {
deger=td.textContent || td.innerText;
if(deger.toUpperCase().indexOf(arananyeni)>-1) {
tr[x].style.display="";
} else {
tr[x].style.display="none";
}
}
}
}
</script>
</body>
</html>