Sorot Baris di Tabel HTML Dengan Klik

Saat Anda membuat halaman Web dalam HTML, Anda dapat menggunakan fungsi JavaScript untuk mengubah tampilan elemen halaman pada interaksi pengguna. Untuk menyorot baris tertentu dalam tabel, Anda bisa mengatur deklarasi Cascading Style Sheet untuk baris ini dalam kondisi normal dan dalam kondisi yang disorot. Dengan menambahkan atribut pendengar peristiwa ke elemen baris, halaman Anda dapat memanggil fungsi JavaScript untuk mengeksekusi onclicks, mengubah atribut nama kelas elemen secara dinamis dan kemudian mengubah penampilan mereka.

1.

Buat tabel HTML Anda. Tambahkan kode markup sampel berikut ke file halaman Web Anda:

Tabel ini berisi dua baris masing-masing dengan tiga kolom. Setiap sel memiliki nomor di dalamnya untuk demonstrasi, tetapi Anda dapat memasukkan konten apa pun yang Anda suka di halaman Anda sendiri.

2.

Tambahkan bagian untuk CSS di bagian kepala halaman Anda. Di antara tag head pembuka dan penutup di file Anda, tambahkan garis besar kode CSS berikut:

Kode ini menetapkan baris tabel untuk memiliki latar belakang putih secara default, dengan latar belakang merah ketika pengguna mengkliknya. Anda dapat mengubah pengaturan ini untuk mencerminkan gaya halaman Anda sendiri. Ketika pengguna pertama kali melihat halaman, pengaturan CSS normal akan berlaku, seperti yang ditunjukkan oleh atribut kelas baris tabel dalam kode HTML asli.

3.

Tambahkan bagian untuk JavaScript di bagian kepala halaman Anda. Di antara tag head pembuka dan penutup dalam file Anda, tambahkan kode berikut:

Ini membuat bagian skrip dan garis besar fungsi. Browser akan memanggil fungsi ini ketika pengguna mengklik salah satu baris tabel Anda, melewati nilai atribut ID dari baris yang diklik sehingga skrip dapat mengidentifikasinya.

4.

Ubah nama kelas elemen baris tabel Anda. Ketika fungsi dijalankan, ini berarti bahwa pengguna telah mengklik elemen baris. Tambahkan kode berikut di dalam fungsi JavaScript Anda, dapatkan referensi ke elemen baris tabel dalam halaman: var row = document.getElementById (rowID);

Tambahkan baris berikut untuk mendapatkan salinan string dari nama kelas saat ini dari elemen baris tabel Anda: var curr = row.className;

Tambahkan pernyataan bersyarat yang menyesuaikan tampilan baris tabel Anda: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; lain row.className = "normal";

Jika baris tabel Anda saat ini ditetapkan sebagai normal, fungsi akan mengubahnya untuk memiliki status sorotan. Jika saat ini disorot, fungsi akan mengubahnya kembali normal. Ini akan menciptakan efek beralih, dengan status sorotan bergantian setiap kali pengguna mengklik baris.

5.

Simpan file Anda dan buka halaman dalam program browser Web. Uji halaman dengan mengklik berulang kali pada baris. Anda akan melihat perubahan warna latar belakang setiap kali Anda mengklik satu baris. Jika halaman tidak menyorot baris pada mengklik, periksa kode Anda dan buka lagi. Tingkatkan kode untuk memberikan tingkat penyorotan dan presentasi yang Anda inginkan dari situs Anda.

Tip

• Dengan menambahkan kode CSS Anda, Anda dapat menentukan warna teks dan properti lainnya dari baris tabel Anda di setiap negara.

Peringatan

• JavaScript dan CSS memiliki hasil yang berbeda di seluruh browser, jadi pengujian sangat penting.