Table Row And Column Highlight On Hover Using JavaScript

	   <table class="tutorial-table" border="1">
		  <thead>
			  <tr>
				<th class="table-header" width="10%">No.</th>
				<th class="table-header">Title</th>
				<th class="table-header">Description</th>
			  </tr>
		  </thead>
		  <tbody>
			  <tr class="table-row">
				<td>1.</td>
				<td>Solace</td>
				<td>A psychic works with the FBI in order to hunt down a serial killer.</td>
			  </tr>
			  <tr class="table-row">
				<td>2.</td>
				<td>Sunset Song</td>
				<td>The daughter of a Scottish farmer comes of age in the early 1900s.</td>
			  </tr>
			  <tr class="table-row">
				<td>3.</td>
				<td>The Trust</td>
				<td>Waters and Stone are two nobody police officers who work in the evidence room of the Las Vegas Police.</td>
			  </tr>
			  <tr class="table-row">
				<td>4.</td>
				<td>The Huntsman: Winter's War</td>
				<td>This follow-up to Snow White and the Huntsman begins when we see how Ravenna took over Snow White's.</td>
			  </tr>
			  <tr class="table-row">
				<td>5.</td>
				<td>Confirmation</td>
				<td>Judge Clarence Thomas' nomination to the United States' Supreme Court is called into question when former colleague, Anita Hill, testifies that he had sexually harassed her.</td>
			  </tr>
		  </tbody>
		</table>

		<script src="js/code_js.js"></script>
		<script src="js/code_js1.js"></script>
		<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","blue")
				}, function() {
					var index = $(this).index();
					$("th.table-header, td").removeClass("current-col");
					$("th.table-header").filter(":nth-child(" + (index+1) + ")").css("background-color","red")
				});
			}); 
		</script>

<style type="text/css">
body {
	width:700px;
	margin:auto;
}
.current-row {
	background-color:pink;
	cursor:pointer;
	color:#FFF;
	font-size:20px;
}
.current-col {
	background-color:skyblue;
	color:#FFF;
	cursor:pointer;
	font-size:20px;
}
.tutorial-table {
	width: 100%;
	font-size:18px;
	border: blue 1px solid;
	border-spacing: initial;
	margin: 20px;
	word-break: break-word;
	table-layout: fixed;
	cursor:pointer;
}
.tutorial-table th.table-header {
	background-color: white;
	text-align: center;
	padding:10px;
	cursor:pointer;
}
.tutorial-table .table-row td {
	padding:10px;
	cursor:pointer;
}
</style>