Membuat jQuery Table Row Column Highlight on Hover

0 96

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

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.