
Tutorial jQuery ini membantu untuk menyoroti tabel dan kolom pada event mouseover. Ada beberapa fungsi penanganan event di jQuery untuk menyoroti tabel baris / kolom.
Dalam tutorial ini, kita menggunakan jQuery hover () untuk melewatkan fungsi yang bisa dipanggil di atas mouse, mouse out events. Fungsi ini digunakan untuk menambahkan / menghapus pemilih kelas CSS untuk menyorot baris tabel / kolom.
Kolom Baris Tabel HTML
Kami menggunakan tabel ini untuk menyoroti baris dan kolom menggunakan jQuery.
<table class="tutorial-table"> <thead> <tr> <th class="table-header" width="10%">Q.No.</th> <th class="table-header">Pertanyaan</th> <th class="table-header">Jawaban</th> </tr> </thead> <tbody> <tr class="table-row"> <td>1.</td> <td>Apa itu PHP?</td> <td>Bahasa script sisi server.</td> </tr> <tr class="table-row"> <td>2.</td> <td>Apa itu php.ini?</td> <td>Fike konfigurasi.</td> </tr> <tr class="table-row"> <td>3.</td> <td>Cara mengatur konfigurasi php?</td> <td>Dengan menggunakan file konfigurasi php.ini.</td> </tr> </tbody> </table>
jQuery Row Column Highlight pada Hover
Kode jQuery ini digunakan untuk memanggil hover () pada event mouseover elemen tabel (tr) dan table-head (TH). Ini akan menjalankan fungsi jQuery highlight dengan mengubah properti CSS yang sesuai.
<script> $(document).ready(function() { $('.table-row').hover(function() { $(this).addClass('current-row'); }, function() { $(this).removeClass('current-row'); }); $("th").hover(function() { var index = $(this).index(); $("th.table-header, td").filter(":nth-child(" + (index+1) + ")").addClass("current-col"); $("th.table-header").filter(":nth-child(" + (index+1) + ")").css("background-color","#999") }, function() { var index = $(this).index(); $("th.table-header, td").removeClass("current-col"); $("th.table-header").filter(":nth-child(" + (index+1) + ")").css("background-color","#F5F5F5") }); }); </script>Demo
