Tıklama ile HTML Tablolarındaki Satırları Vurgulama

HTML’de Web sayfaları oluşturduğunuzda, sayfa öğelerinin kullanıcı etkileşimi üzerindeki görünümünü değiştirmek için JavaScript işlevlerini kullanabilirsiniz. Bir tablodaki belirli satırları vurgulamak için, bu satırlara ilişkin Basamaklı Stil Sayfası bildirimlerini normal durumlarında ve vurgulanan durumlarında ayarlayabilirsiniz. Satır öğelerine bir olay dinleyicisi niteliği ekleyerek, sayfanız onclicks yürütmek için bir JavaScript işlevini çağırabilir, öğenin sınıf adı özelliklerini dinamik olarak değiştirebilir ve ardından görünümlerini değiştirebilir.

1.

HTML tablonuzu oluşturun. Web sayfanıza aşağıdaki örnek biçimlendirme kodunu ekleyin:

Bu tablo, her birinde üç sütun bulunan iki satır içerir. Hücrelerin her birinin gösteri için bir numarası vardır, ancak kendi sayfanıza istediğiniz içeriği ekleyebilirsiniz.

2.

Sayfanızın baş bölümüne CSS için bir bölüm ekleyin. Dosyanızdaki açılış ve kapanış başlığı etiketleri arasında, aşağıdaki CSS kod anahattını ekleyin:

Bu kod, tablo satırlarını varsayılan olarak beyaz bir arka plana, kullanıcı tıklattığında kırmızı arka plana sahip olacak şekilde ayarlar. Bu ayarları kendi sayfanızın stilini yansıtacak şekilde değiştirebilirsiniz. Kullanıcı sayfayı ilk görüntülediğinde, orijinal HTML kodundaki tablo satır sınıfı özellikleriyle gösterildiği gibi normal CSS ayarları uygulanır.

3.

Sayfa başı bölümünüze JavaScript için bir bölüm ekleyin. Dosyanızdaki açılış ve kapanış başlığı etiketleri arasına aşağıdaki kodu ekleyin:

Bu bir komut dosyası bölümü ve işlev anahat oluşturur. Kullanıcı tablo satırlarınızdan herhangi birini tıklattığında tarayıcı bu işlevi çağırır, tıklanan satırın ID öznitelik değerini geçirerek komut dosyası tanımlayabilir.

4.

Tablo satır öğelerinin sınıf adını değiştirin. İşlev yürütüldüğünde, kullanıcının bir satır öğesini tıkladığı anlamına gelir. Sayfadaki tablo satır elemanına bir referans alarak, JavaScript işlevinize aşağıdaki kodu ekleyin: var row = document.getElementById (rowID);

Tablo satır öğenizin geçerli sınıf adının bir dize kopyasını almak için aşağıdaki satırı ekleyin: var curr = row.className;

Tablo satır görünümünüzü düzenleyen koşullu bir ifade ekleyin: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; else row.className = "normal";

Tablo sıranız şu anda normal olarak ayarlanmışsa, işlev vurgulama durumuna sahip olacak şekilde değişir. Halihazırda vurgulanmışsa, fonksiyon tekrar normale dönecektir. Bu, kullanıcının satırı her tıkladığında vurgulama durumunun değişmesiyle bir geçiş efekti oluşturur.

5.

Dosyanızı kaydedin ve sayfayı bir Web tarayıcı programında açın. Satırlarda art arda tıklayarak sayfayı test edin. Bir satırı her tıkladığınızda arka plan renginin değişimini görmelisiniz. Sayfa tıklandığında satırları vurgulamazsa, kodunuzu kontrol edin ve tekrar açın. Sitenizin sahip olmasını istediğiniz vurgulama ve sunum düzeyini sağlamak için kodu geliştirin.

Bahşiş

• CSS kodunuza ekleyerek, metin rengini ve tablo satırlarınızın diğer özelliklerini her bir durumda dikte edebilirsiniz.

Uyarı

• JavaScript ve CSS tarayıcılarda farklı sonuçlara sahiptir, bu nedenle test gereklidir.