Javascript와 jQuery를 사용한 Table 다중 선택 소스입니다.
html Table 생성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <body> <table class="selectTable"> <thead> <tr> <td>title1</td> <td>title2</td> <td>title3</td> </tr> </thead> <tbody> <tr> <td>content1</td> <td>content2</td> <td>content3</td> </tr> <tr> <td>content4</td> <td>content5</td> <td>content6</td> </tr> <tr> <td>content7</td> <td>content8</td> <td>content9</td> </tr> </tbody> </table></body> |
css 설정
1 2 3 4 5 6 7 8 9 | <style> .selectTable { border: 1px solid #000000; } #select { background-color: #BDBDBD; }</style> |
javascript설정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript"> var lastIndex = 0; $(document).ready(function() { $(".selectTable tbody tr").click(function() { var select = $(this); var index = select.index(); select.attr("id", "select"); if(!window.event.ctrlKey && !window.event.shiftKey) { select.siblings().removeAttr("id"); } else if(window.event.shiftKey) { for(var i=Math.min(lastIndex, index);i<Math.max(lastIndex, index);i++) { $(".selectTable tbody tr").eq(i).attr("id", "select"); } } lastIndex = index; }); });</script> |
결과
추가 옵션
-블록지정 방지
1 | <body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"> |
소스 및 예제페이지 확인
'Web' 카테고리의 다른 글
| [Javascript]확인, 취소 Confirm Dialog 띄우기 (0) | 2018.09.11 |
|---|---|
| [Javascript/jQuery]버튼 클릭, 더블클릭 이벤트 (0) | 2018.09.06 |
알터.