'Javascript'에 해당되는 글 17건

  1. 2011.11.15 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2
  2. 2011.11.14 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 2
  3. 2011.11.11 jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 33
  4. 2011.11.11 jQuery로 테이블 tr 동적으로 추가,삭제 하기 3
  5. 2011.11.09 javascript Array 에 protoype으로 remove 함수 추가하기 2

jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제


맨들어볼 기능은 아래와 같다.

많이들 보는 형태의 테이블이다. 각 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>



순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기


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>


jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

저번에 맹글었던거에서 옵션을 추가하는 기능을 추가해보았다.


이 예제에서 꽤 많은 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>	


jQuery로 테이블 tr 동적으로 추가,삭제 하기



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>	


javascript Array 에 protoype으로 remove 함수 추가하기



요상스럽게도 자바스크립트 배열 객체에는 배열상의 특정 인덱스에 있는 엘리먼트를 삭제하는 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"]




prev 1 2 3 4 next