요렇게 Table에서 rowspan 을 처리해주는게 필요해서 관련 훌러그인이 있나 찾아 보다가 어떤 친절한 사람이 github에 만들어 놓은것을 발견하였다.

https://github.com/marcosesperon/jquery.rowspanizer.js

하지만 살짝 문제가 있었는데

어떤 특정컬럼에 대해 rowspan 할지 지정하는 옵션이 없어서 모든 td 들에 대해서 rowspan 을 해버리는게 쪼금 아쉬웠다.

나는 특정 컬럼에만 적용하고 싶었는데... 뭐 어쩌나~ 그 친절한 사람이 만들어 놓은 훌러그인을 살짝 수정했다.

본의 아니게 친절한 분의 깔끔한 소스코드에 나의 더러운 코드를 쪼금 넣었다.

jquery.rowspanizer.js

사용법은 기존대로 요렇게 하면 모든 컬럼에 대해서 적용하는 것이고

$("#target-table").rowspanizer();

1, 2, 5번째 컬럼에 대해서 적용하려면 요렇게 하면 된다.

$("#target-table").rowspanizer({
    cols : [0, 1, 4],
    vertical_align: "middle"
});

jquery.shortcut-0.1.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.shortcut-0.1.js" type="text/javascript"></script>

<script type="text/javascript">
	$.shortcut({
		65 : function(){
			alert("a키 눌렀을때 처리할 기능");
			// window.location.href = "/";  // 홈으로 이동
		},
		66 : function(){
			alert("b키 눌렀을때 처리할 기능");
			// $("#keyword").focus();   // keyword 인풋박스로 포커스 이동
		}
	});
</script>

jquery.blinghover-0.1.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.blinghover-0.1.js" type="text/javascript"></script>

사용법 및 데모

1. 디폴트

<script type="text/javascript">
	$("a").blingHover();
</script>

<a href="#">테스트 링크1</a>
<a href="#">테스트 링크2</a>
<a href="#">테스트 링크3</a>

2. 롤오버 컬러지정

<script type="text/javascript">
	$("a.test1").blingHover("rgb(0, 255, 0)");
</script>

<a href="#" class="test1">테스트 링크4</a>
<a href="#" class="test1">테스트 링크5</a>
<a href="#" class="test1">테스트 링크6</a>

3. 롤오버 컬러지정

<script type="text/javascript">
	$("a.test2").blingHover("#ff8600");
</script>

<a href="#" class="test2">테스트 링크7</a>
<a href="#" class="test2">테스트 링크8</a>
<a href="#" class="test2">테스트 링크9</a>

4. 롤오버 에니메이션 시간 및 컬러지정

<script type="text/javascript">
	$(".demo_links span.test3").blingHover({color:"#ff8600",time:500});
</script>

<span class="test3">테스트 span10</span>
<span class="test3">테스트 span11</span>
<span class="test3">테스트 span12</span>

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size: 20px;}

뿌잉뿌잉~ 크게 크게