테이블 셀에 hover 시 열(column)에만 highlight 효과 주기 > jquery

<style>
table {border-collapse:collapse; width:100%;}
th, td {width:25%; padding:5px; text-align:center; border:2px solid #ccc;}
.hover {background:red;}
</style>


<table>
	<thead>
	<tr>
		<th>이름</th>
		<th>거주지</th>
		<th>전화번호</th>
		<th>Email</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>홍길동</td>
		<td>서울</td>
		<td>010-1234-5678</td>
		<td>test1@test.com</td>
	</tr>
	<tr>
		<td>이순신</td>
		<td>대전</td>
		<td>010-1234-5676</td>
		<td>test2@test.com</td>
	</tr>
	<tr>
		<td>신데렐라</td>
		<td>대구</td>
		<td>010-1234-5678</td>
		<td>test3@test.com</td>
	</tr>
	<tr>
		<td>김구</td>
		<td>부산</td>
		<td>010-1234-5678</td>
		<td>test4@test.com</td>
	</tr>
	</tbody>
</table>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var allCells = $("td, th");
allCells.on("mouseover", function() {
	var el = $(this);
	var pos = el.index();
	allCells.filter(":nth-child(" + (pos+1) + ")").addClass("hover");
}).on("mouseout", function() {
	allCells.removeClass("hover");
});
</script>