'Javascript'에 해당되는 글 17건
- 2011.11.15 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2
- 2011.11.14 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 2
- 2011.11.11 jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 33
- 2011.11.11 jQuery로 테이블 tr 동적으로 추가,삭제 하기 3
- 2011.11.09 javascript Array 에 protoype으로 remove 함수 추가하기 2
jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
Javascript 예제 2011. 11. 15. 01:59
맨들어볼 기능은 아래와 같다.
많이들 보는 형태의 테이블이다. 각 row 에 체크박스가 있고 헤더에 있는 체크박스를 선택하면 모든 체크박스들이 싹다 선택되고 하는 고런 기능이다~
대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람)
제목 | 날짜 | |
---|---|---|
제목1 | 날짜1 | |
제목2 | 날짜2 | |
제목3 | 날짜3 | |
제목4 | 날짜4 | |
제목5 | 날짜5 | |
제목6 | 날짜6 |
소스는 요렇다. 얼핏보면 은근 복잡해 보이기도 한데
그냥 별 생각없이 예제를 만들다 보니 그런것도 있고~ jQuery 의 함수들을 이것저것 복합 다양하게 일부러 쓴 경향도 있다.
이왕이면 여러가지 것들을 써 봄으로써 몰랐던 jQuery 의 쓰임새도 추가적으로 파악할 수 있지 않을까 하는 고런 마음에서 -_-;;
jQuery 함수 이름들이 워낙 이해하기 쉽게 명료하게 되 있어서, 소스를 그냥 눈에 읽히는데로 쭉 읽으면 대충은 이해되지 않을까 한다~
별건 아니면서 허접한 소스지만, 소스를 보고 요 소스가 우째 죠런 기능을 하게 맹글까? 라는 이해를 하게 된다면
jQuery 사용법에 대해서 전 보다는 많이 알고 있는 상태로 변할 것이라고 믿어 의심치 않는다~
<!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>
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/12 - [CSS] - table cellspacing, cellpadding 속성을 css 로 처리하기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/09/02 - [쓸만한지식] - IE9 User-agent 바꾸기~
2011/08/30 - [jQuery Plugin] - jQuery Plugin : Slider
2011/08/08 - [이클립] - Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기
2011/11/12 - [CSS] - table cellspacing, cellpadding 속성을 css 로 처리하기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/09/02 - [쓸만한지식] - IE9 User-agent 바꾸기~
2011/08/30 - [jQuery Plugin] - jQuery Plugin : Slider
2011/08/08 - [이클립] - Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기
'Javascript 예제' 카테고리의 다른 글
jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
---|---|
jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기 (3) | 2011.11.11 |
순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
Javascript 2011. 11. 14. 15:44
PHP,JSP,ASP 같은 서버사이드 스크립트 언어처럼 확실하게 파라메터를 가져온다는 장담은 못한다.
이게 쪽바로 작동하기 위한 전제조건은
브라우져 주소창 url에 파라메터 정보가 다 있어야 된다는 것이다. 왜냐하면 브라우져 주소창 url 을 파싱해서 파라메터 정보를 가져오기 때문에 -_-;
※ 순수하게 javascript로는 post 방식으로 넘긴 파라메터는 못가져올 것이라고 장담은 못하지만 아마 못가져오지 않을까라는 추정은 해본다 -_-
아무튼 자바스크립트 코드는 다음과 같다.
ex) 브라우져 주소창에 http://xxxxxxxx/paramTest.html?test1=a&test2=b 라고 접근했다고 가정.
<script> // 파라메터 정보가 저장될 오브젝트 // common.js 같은 모든 페이지에서 로딩되는 js 파일에 넣어두면 됨. var getParam = function(key){ var _parammap = {}; document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () { function decode(s) { return decodeURIComponent(s.split("+").join(" ")); } _parammap[decode(arguments[1])] = decode(arguments[2]); }); return _parammap[key]; }; alert("test1 : " + getParam("test1")); // a </script>
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기
2011/11/09 - [Javascript] - javascript Array 에 protoype으로 remove 함수 추가하기
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기
2011/11/09 - [Javascript] - javascript Array 에 protoype으로 remove 함수 추가하기
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
'Javascript' 카테고리의 다른 글
Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
---|---|
Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
javascript Array 에 protoype으로 remove 함수 추가하기 (2) | 2011.11.09 |
javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기 (6) | 2011.11.07 |
Javascript 문자열 바이트수 가져오기(byteLength) (1) | 2011.11.01 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
Javascript 예제 2011. 11. 11. 21:01
저번에 맹글었던거에서 옵션을 추가하는 기능을 추가해보았다.
이 예제에서 꽤 많은 jQuery 셀렉터와 함수들을 사용한것 같은데 소스를 이해해 보면서 jQuery 사용법을 살살 익혀봐도 좋을것 같다.
만들어질 것은 다음과 같다. (직접 클릭해 보기바람)
옵션명 | 항목명 | 필수항목 | 가격 | 재고 | 옵션추가 |
---|---|---|---|---|---|
소스
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ // 옵션추가 버튼 클릭시 $("#addItemBtn").click(function(){ // item 의 최대번호 구하기 var lastItemNo = $("#example tr:last").attr("class").replace("item", ""); var newitem = $("#example tr:eq(1)").clone(); newitem.removeClass(); newitem.find("td:eq(0)").attr("rowspan", "1"); newitem.addClass("item"+(parseInt(lastItemNo)+1)); $("#example").append(newitem); }); // 항목추가 버튼 클릭시 $(".addBtn").live("click", function(){ var clickedRow = $(this).parent().parent(); var cls = clickedRow.attr("class"); // tr 복사해서 마지막에 추가 var newrow = clickedRow.clone(); newrow.find("td:eq(0)").remove(); newrow.insertAfter($("#example ."+cls+":last")); // rowspan 조정 resizeRowspan(cls); }); // 삭제버튼 클릭시 $(".delBtn").live("click", function(){ var clickedRow = $(this).parent().parent(); var cls = clickedRow.attr("class"); // 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다. if( clickedRow.find("td:eq(0)").attr("rowspan") ){ if( clickedRow.next().hasClass(cls) ){ clickedRow.next().prepend(clickedRow.find("td:eq(0)")); } } clickedRow.remove(); // rowspan 조정 resizeRowspan(cls); }); // cls : rowspan 을 조정할 class ex) item1, item2, ... function resizeRowspan(cls){ var rowspan = $("."+cls).length; $("."+cls+":first td:eq(0)").attr("rowspan", rowspan); } }); </script> </head> <body> <button id="addItemBtn">옵션추가</button> <table id="example" border="1px"> <tr> <th>옵션명</th> <th>항목명</th> <th>필수항목</th> <th>가격</th> <th>재고</th> <th>옵션추가</th> </tr> <tr class="item1"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> <tr class="item2"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> <tr class="item3"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> <tr class="item4"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> </table> </body> </html>
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingLink v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/06 - [jQuery Plugin] - jQuery datepicker 팝업창 사이즈 바꾸기
2011/11/06 - [jQuery Plugin] - jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/09/09 - [Javascript] - Javascript Date format 함수
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingLink v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/06 - [jQuery Plugin] - jQuery datepicker 팝업창 사이즈 바꾸기
2011/11/06 - [jQuery Plugin] - jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/09/09 - [Javascript] - Javascript Date format 함수
'Javascript 예제' 카테고리의 다른 글
jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
---|---|
jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기 (3) | 2011.11.11 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기
Javascript 예제 2011. 11. 11. 03:14
jQuery를 사용해 테이블을 동적으로 변화시키는 예제를 맹글어 보았다.
jQuery 로 맹글어서 왠만한 브라우져에서는 다 작동할 것이라 예측한다. 살짝 응용하면 다른 재미진 것도 할 수 있을듯~
만들어질 것은 다음과 같다. (직접 클릭해 보기바람)
옵션명 | 항목명 | 필수항목 | 가격 | 재고 | 옵션추가 |
---|---|---|---|---|---|
소스
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ // 항목추가 버튼 클릭시 $(".addBtn").click(function(){ var clickedRow = $(this).parent().parent(); var cls = clickedRow.attr("class"); // tr 복사해서 마지막에 추가 var newrow = clickedRow.clone(); newrow.find("td:eq(0)").remove(); newrow.insertAfter($("#example ."+cls+":last")); // rowspan 증가 resizeRowspan(cls); }); // 삭제버튼 클릭시 $(".delBtn").live("click", function(){ var clickedRow = $(this).parent().parent(); var cls = clickedRow.attr("class"); // 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다. if( clickedRow.find("td:eq(0)").attr("rowspan") ){ if( clickedRow.next().hasClass(cls) ){ clickedRow.next().prepend(clickedRow.find("td:eq(0)")); } } clickedRow.remove(); resizeRowspan(cls); }); // cls : rowspan 을 조정할 class ex) item1, item2, ... function resizeRowspan(cls){ var rowspan = $("."+cls).length; $("."+cls+":first td:eq(0)").attr("rowspan", rowspan); } }); </script> </head> <body> <table id="example" border="1px"> <tr> <th>옵션명</th> <th>항목명</th> <th>필수항목</th> <th>가격</th> <th>재고</th> <th>옵션추가</th> </tr> <tr class="item1"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> <tr class="item2"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> <tr class="item3"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> <tr class="item4"> <td><input type="text" /><button class="addBtn">항목추가</button></td> <td><input type="text" /></td> <td><input type="checkbox" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><button class="delBtn">삭제</button></td> </tr> </table> </body> </html>
2011/11/09 - [Javascript] - javascript Array 에 protoype으로 remove 함수 추가하기
2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기
2011/11/02 - [쓸만한지식] - 옥션 바로가기 링크
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/09/09 - [Javascript] - Javascript Date format 함수
2011/09/28 - [Javascript] - Javascript Timer setTimeout(), setInterval() 함수 나름 새로운 사용법 -_-
2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기
2011/11/02 - [쓸만한지식] - 옥션 바로가기 링크
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/09/09 - [Javascript] - Javascript Date format 함수
2011/09/28 - [Javascript] - Javascript Timer setTimeout(), setInterval() 함수 나름 새로운 사용법 -_-
'Javascript 예제' 카테고리의 다른 글
jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
---|---|
jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
javascript Array 에 protoype으로 remove 함수 추가하기
Javascript 2011. 11. 9. 01:55
요상스럽게도 자바스크립트 배열 객체에는 배열상의 특정 인덱스에 있는 엘리먼트를 삭제하는 remove(index) 요런 함수가 없다.
뭔 이유가 있으니까 안 맨들어 놨겠지만 개발을 하다보면 죠런 함수가 간절하게 필요한 경우가 있다.
prototype 을 이용해 Array 객체에 remove() 함수를 추가해 보자.
Array.prototype.remove = function(idx) { return (idx<0 || idx>this.length) ? this : this.slice(0, idx).concat(this.slice(idx+1, this.length)); };
죠걸 모든 페이지에서 공통적으로 포함시키는 common.js 같은 js 파일에 추가하면 배열 객체에서 remove() 함수를 쓸 수 있게 된다.
// 테스트 var arr = ["a", "b", "c", "d"]; console.log(arr.remove(0)); // ["b", "c", "d"] console.log(arr.remove(1)); // ["a", "c", "d"] console.log(arr.remove(2)); // ["a", "b", "d"] console.log(arr.remove(3)); // ["a", "b", "c"] console.log(arr.remove(4)); // ["a", "b", "c", "d"] console.log(arr.remove(-1)); // ["a", "b", "c", "d"]
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingLink v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기
2011/11/06 - [jQuery Plugin] - jQuery datepicker 팝업창 사이즈 바꾸기
2011/11/06 - [jQuery Plugin] - jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/10/24 - [쓸만한지식] - 네이버에서 제공해주는 PPT, DOC, HWP 서식(Template) 받자~
2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기
2011/11/06 - [jQuery Plugin] - jQuery datepicker 팝업창 사이즈 바꾸기
2011/11/06 - [jQuery Plugin] - jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/10/24 - [쓸만한지식] - 네이버에서 제공해주는 PPT, DOC, HWP 서식(Template) 받자~
'Javascript' 카테고리의 다른 글
Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
---|---|
순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기 (6) | 2011.11.07 |
Javascript 문자열 바이트수 가져오기(byteLength) (1) | 2011.11.01 |
Firefox 이벤트 객체의 srcElement 참조하기 (0) | 2011.10.07 |