'분류 전체보기'에 해당되는 글 223건

  1. 2011.11.15 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2
  2. 2011.11.14 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 2
  3. 2011.11.13 Java Map 반복(Iteration)시키는 3가지 방법 5
  4. 2011.11.12 table cellspacing, cellpadding 속성을 css 로 처리하기 1
  5. 2011.11.11 크롬 최신버전 15.0.874.120 for Chrome Stable 다운로드 직링크(11.11.11)

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 변경하기



저작자표시 비영리 변경금지

'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
Posted by 스토브

순수 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


저작자표시 비영리 변경금지

'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
Posted by 스토브

Java Map 반복(Iteration)시키는 3가지 방법

Java 2011. 11. 13. 23:36

왠지 도움이 될것 같다면 추천을 *(-_-)*


이 세가지 방법 말고도 뭐 다른 방법이 있겠지만 대충 요 3가지 정도만 알고 있어도 충분하고도 넘칠것 같다.

이전까지는 제일 첫번째 방법으로만 Map 에 있는 것들을 꺼내서 썼었는데

세번째 방법도 꽤 간결하고 가독성도 좋은것 같아 앞으로 세번째 방법을 주로 써야 겠다는 생각을 해본다.


package com.tistory.stove99;

import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

public class MapIterationSample {
	public static void main(String[] agrs) {
		Map<String, String> map = new HashMap<String, String>();
		
		map.put("키1", "값1");
		map.put("키2", "값2");
		map.put("키3", "값3");
		map.put("키4", "값4");
		map.put("키5", "값5");
		map.put("키6", "값6");
		
		
		// 방법1
		Iterator<String> keys = map.keySet().iterator();
		while( keys.hasNext() ){
			String key = keys.next();
			System.out.println( String.format("키 : %s, 값 : %s", key, map.get(key)) );
		}
		
		// 방법2
		for( Map.Entry<String, String> elem : map.entrySet() ){
			System.out.println( String.format("키 : %s, 값 : %s", elem.getKey(), elem.getValue()) );
		}
		
		// 방법3
		for( String key : map.keySet() ){
			System.out.println( String.format("키 : %s, 값 : %s", key, map.get(key)) );
		}
	}
}

2011/11/09 - [Java] - 디폴트 패키지에 있는 자바 class 실행하기 ( Could not find the main class 에러날때 )

2011/10/23 - [maven] - Sonatype Nexus #2 : 설정 및 maven 과 연결하기

2011/10/23 - [maven] - Sonatype Nexus #1 : 톰캣에 설치하기

2011/10/13 - [maven] - maven package goal 로 war나 jar 파일 생성시 생성되는 파일명 설정하기

2011/10/05 - [Java] - Jetty Scanner 를 이용한 특정 디렉토리 및 파일 변경사항(delete, change, add) 모니터링하기
저작자표시 비영리 변경금지

'Java' 카테고리의 다른 글

재귀함수(Recursive funtion)을 이용한 특정 폴더 아래의 모든 파일정보 읽어서 출력하기  (0) 2011.11.16
JAVA/JSP SQL Injection 해킹 방지를 위한 코딩  (5) 2011.11.16
디폴트 패키지에 있는 자바 class 실행하기 ( Could not find the main class 에러날때 )  (1) 2011.11.09
WAS(Tomcat 또는 기타등등~) 메모리 사용현황 모니터링 JSP  (3) 2011.10.18
Runtime 에 jar 파일 클래스패스에 추가 시키기 : RuntimeJarLoader  (1) 2011.10.10
Posted by 스토브

table cellspacing, cellpadding 속성을 css 로 처리하기

CSS 2011. 11. 12. 21:42

cellpadding 속성은 td style에 padding 을 주면 동일한 효과가 적용되고,


cellspacing 속성은 table style에 border-spacing 을 적용하면 동일한 효과가 적용된다.


CSS 로 cellspacing, cellpadding 처리
가나다라 가나다라
가나다라 가나다라 


<style>
	#tbl {border-spacing:100px;}
	#tbl td {padding:30px;}
</style>


<table id="tbl" border="1px">
	<caption>CSS 로 cellspacing, cellpadding 처리</caption>
	<tr>
		<td>가나다라</td>
		<td>가나다라</td>
	</tr>
	<tr>
		<td>가나다라</td>
		<td>가나다라</td>
	</tr>
</table>

2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

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/09/28 - [Javascript] - Javascript Timer setTimeout(), setInterval() 함수 나름 새로운 사용법 -_-

2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1


저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

HTML 테이블 높이 100% 맨들기  (2) 2014.05.20
Posted by 스토브

크롬 최신버전 15.0.874.120 for Chrome Stable 다운로드 직링크(11.11.11)

쓸만한지식 2011. 11. 11. 21:58

왠지 도움이 될것 같다면 추천을 *(-_-)*




다운로드 직링크에요~~

http://dl.google.com/chrome/install/874.120/chrome_installer.exe


2011/11/07 - [쓸만한지식] - [팁] 윈도우7 에서 특수문자 입력을 쪼금더 편리하게~

2011/11/02 - [쓸만한지식] - 옥션 바로가기 링크

2011/10/24 - [쓸만한지식] - 네이버에서 제공해주는 PPT, DOC, HWP 서식(Template) 받자~

2011/10/11 - [쓸만한지식] - 11번가 바로가기 링크

2011/09/02 - [쓸만한지식] - Firefox User-agent 변경하기

2011/09/02 - [쓸만한지식] - IE8 User-agent 바꾸기


저작자표시 비영리 변경금지

'쓸만한지식' 카테고리의 다른 글

북앤라이프 캐쉬 예스24 에서 사용하는 방법  (4) 2011.11.29
크롬 최신버전 15.0.874.121 for Chrome Stable 다운로드 직링크(11.11.17)  (0) 2011.11.18
[팁] 윈도우7 에서 특수문자 입력을 쪼금더 편리하게~  (0) 2011.11.07
옥션 바로가기 링크  (0) 2011.11.02
크롬 최신버전 15.0.874.106 for Chrome Stable 다운로드 직링크(11.10.27)  (0) 2011.10.27
Posted by 스토브
prev 1 ··· 23 24 25 26 27 28 29 ··· 45 next
openclose

티스토리툴바