Table Highlight

적용된 테이블

noDepCodeDepNameTelBigo
1T0001Management1234-567815
2T0002Service9999-99995
3T0003Design9876-543211
4T0004App0234-56787
5T0005Platform9999-777722
6T0006WebDev0904-567810
7T0007Cloud9876-543230
8T0008Market0999-77778

각각의 셀에 마우스 포인터가 위치했을 때 얻을 수 있는 값

noDepCodeDepNameTelBigo
01234
01234
01234
01234
01234
01234
01234
01234
							$(function(){
								$("th:nth-child(odd)").addClass("odd");
								$("tr:nth-child(even)").addClass("even");
								
								$("tr:not(:first-child)").mouseover(function(){
									$(this).addClass("hover");
								}).mouseout(function(){
									$(this).removeClass("hover");
								});
								
								$("td").mouseover(function(){
									$("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").addClass("hover");
								}).mouseout(function(){
									$("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").removeClass("hover");
								});
							});					
						

행에 하이라이트 효과 주기

					
							$("tr:not(:first-child)").mouseover(function(){
								$(this).addClass("hover");
							}).mouseout(function(){
								$(this).removeClass("hover");
							});			
						

셀렉터는 tr:not(:first-child)로 첫번쨰(표제행) 이외의 tr태그를 지정하고 마우스 포인터가 표와 겹쳐질 때의 이벤트를 mouseover()와 mouseout()으로 설정합니다. tr태그에 마우스 포인터가 겹쳐지면 "hover"라는 클래스 속성을 추가하고 마우스가 tr태그로 부터 벗어나면 추가한 class속성을 삭제합니다.

열에 하이라이트 효과 주기

							
							$("td").mouseover(function(){
								$("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").addClass("hover");
							}).mouseout(function(){
								$("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").removeClass("hover");
							});	
						

td태그에 마우스 포인터가 올라오면 같은 열의 td 태그에 "hover"라는 class 속성을 추가하고 마우스 포인터가 태그로부터 벗어나면 hover class속성을 삭제하도록 되어 있습니다. 셀렉터의 ($("td").index(this)%$("th").size()+1) 부분이 약간 어려워 보입니다. 코드를 몇개로 나눠서 분석해 보도록 합시다.

						
							$("td").index(this)
						

index(...)는 괄호 안에 기술한 태그의 순서(인덱스 번호)를 찾아주는 명령입니다. 위의 경우는 this, 즉 현재 마우스 포인터가 위치하고 있는 td 태그가 $("td") 중에 몇 번째에 위치해 있는지를 가져오고 있습니다. JavaScript에서는 숫자를 0부터 증가시키므로 최초의 태그는 "0"이 됩니다. 샘플 테이블의 td태그는 아래와 같은 인텍스 번호로 되어 있습니다.

noDepCodeDepNameTelBigo
01234
56789
1011121314
1516171819
2021222324
2526272829
3031323334
3536373839