Membuat jQuery Table Row Column Highlight on Hover

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