많이들 보는 형태의 테이블이다. 각 row 에 체크박스가 있고 헤더에 있는 체크박스를 선택하면 모든 체크박스들이 싹다 선택되고 하는 고런 기능이다~
대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람)
소스는 요렇다. 얼핏보면 은근 복잡해 보이기도 한데
그냥 별 생각없이 예제를 만들다 보니 그런것도 있고~ jQuery 의 함수들을 이것저것 복합 다양하게 일부러 쓴 경향도 있다.
이왕이면 여러가지 것들을 써 봄으로써 몰랐던 jQuery 의 쓰임새도 추가적으로 파악할 수 있지 않을까 하는 고런 마음에서 -_-;;
jQuery 함수 이름들이 워낙 이해하기 쉽게 명료하게 되 있어서, 소스를 그냥 눈에 읽히는데로 쭉 읽으면 대충은 이해되지 않을까 한다~
별건 아니면서 허접한 소스지만, 소스를 보고 요 소스가 우째 죠런 기능을 하게 맹글까? 라는 이해를 하게 된다면
jQuery 사용법에 대해서 전 보다는 많이 알고 있는 상태로 변할 것이라고 믿어 의심치 않는다~
대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람)
| 제목 | 날짜 | |
|---|---|---|
| 제목1 | 날짜1 | |
| 제목2 | 날짜2 | |
| 제목3 | 날짜3 | |
| 제목4 | 날짜4 | |
| 제목5 | 날짜5 | |
| 제목6 | 날짜6 |
소스는 요렇다. 얼핏보면 은근 복잡해 보이기도 한데
그냥 별 생각없이 예제를 만들다 보니 그런것도 있고~ jQuery 의 함수들을 이것저것 복합 다양하게 일부러 쓴 경향도 있다.
이왕이면 여러가지 것들을 써 봄으로써 몰랐던 jQuery 의 쓰임새도 추가적으로 파악할 수 있지 않을까 하는 고런 마음에서 -_-;;
jQuery 함수 이름들이 워낙 이해하기 쉽게 명료하게 되 있어서, 소스를 그냥 눈에 읽히는데로 쭉 읽으면 대충은 이해되지 않을까 한다~
별건 아니면서 허접한 소스지만, 소스를 보고 요 소스가 우째 죠런 기능을 하게 맹글까? 라는 이해를 하게 된다면
jQuery 사용법에 대해서 전 보다는 많이 알고 있는 상태로 변할 것이라고 믿어 의심치 않는다~
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ var tbl = $("#checkboxTestTbl"); // 테이블 헤더에 있는 checkbox 클릭시 $(":checkbox:first", tbl).click(function(){ // 클릭한 체크박스가 체크상태인지 체크해제상태인지 판단 if( $(this).is(":checked") ){ $(":checkbox", tbl).attr("checked", "checked"); } else{ $(":checkbox", tbl).removeAttr("checked"); } // 모든 체크박스에 change 이벤트 발생시키기 $(":checkbox", tbl).trigger("change"); }); // 헤더에 있는 체크박스외 다른 체크박스 클릭시 $(":checkbox:not(:first)", tbl).click(function(){ var allCnt = $(":checkbox:not(:first)", tbl).length; var checkedCnt = $(":checkbox:not(:first)", tbl).filter(":checked").length; // 전체 체크박스 갯수와 현재 체크된 체크박스 갯수를 비교해서 헤더에 있는 체크박스 체크할지 말지 판단 if( allCnt==checkedCnt ){ $(":checkbox:first", tbl).attr("checked", "checked"); } else{ $(":checkbox:first", tbl).removeAttr("checked"); } }).change(function(){ if( $(this).is(":checked") ){ // 체크박스의 부모 > 부모 니까 tr 이 되고 tr 에 selected 라는 class 를 추가한다. $(this).parent().parent().addClass("selected"); } else{ $(this).parent().parent().removeClass("selected"); } }); }); </script> <style> #checkboxTestTbl {border-collapse: collapse;} #checkboxTestTbl td, #checkboxTestTbl th{padding:20px;} #checkboxTestTbl th{background-color: #ccc;} #checkboxTestTbl tr.selected{background-color: navy;color: #fff; font-weight: bold;} </style></head> <body> <table id="checkboxTestTbl" border="1px"> <caption>체크박스 전체선택 테스트</caption> <colgroup> <col width="40px;"/> <col width="200px;"/> <col width="100px;"/> </colgroup> <tr> <th><input type="checkbox"/></th> <th>제목</th> <th>날짜</th> </tr> <tr> <td><input type="checkbox" /></td> <td>제목1</td> <td>날짜1</td> </tr> <tr> <td><input type="checkbox" /></td> <td>제목2</td> <td>날짜2</td> </tr> <tr> <td><input type="checkbox" /></td> <td>제목3</td> <td>날짜3</td> </tr> <tr> <td><input type="checkbox" /></td> <td>제목4</td> <td>날짜4</td> </tr> <tr> <td><input type="checkbox" /></td> <td>제목5</td> <td>날짜5</td> </tr> <tr> <td><input type="checkbox" /></td> <td>제목6</td> <td>날짜6</td> </tr> </table></body></html> |
