Site icon Netopsiyon Online

HTML Tabloda Metin Arama Yapmak

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&#39;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>

 

 

Exit mobile version