'분류 전체보기'에 해당되는 글 223건
- 2011.11.11 jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 33
- 2011.11.11 jQuery로 테이블 tr 동적으로 추가,삭제 하기 3
- 2011.11.09 디폴트 패키지에 있는 자바 class 실행하기 ( Could not find the main class 에러날때 ) 1
- 2011.11.09 javascript Array 에 protoype으로 remove 함수 추가하기 2
- 2011.11.07 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
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 |
디폴트 패키지에 있는 자바 class 실행하기 ( Could not find the main class 에러날때 )
Java 2011. 11. 9. 23:11
간만에 커맨드 창에서 실행해야 하는 자바예제를 작성해 볼 일이 있어서 맨들어 보았다.
그런데 다 맨든게 이클립스에서 run 을 하면 실행이 잘되는데 커맨드창에서 java 클래스명.class 로 실행을 하면
뒤져라 Could not find the main class 요러면서 main 함수를 찾을 수 없다는 에러만 뱉어 내고 실행이 잘 안됬다.
결국은 해결했는데 뭔가 많이 꾸리한 느낌을 받지 아니할 수가 없다.
예제로 맨들어본 아무 패키지 선언도 안된 디폴트 패키지에 있는 Test.java
public class Test {
public static void main(String[] args) {
System.out.println("Hello Everyone~");
}
}
컴파일
javac Test.java
컴파일을 한 후 대부분 요래 실행을 할것이다. 아니면 나만 그런가-_-? 아무튼!
java Test.class
하지만 죠래 실행하면 뒤져도 실행이 안된다. 해답은 요래 실행하는 것이다 -_-
java Test
지금와서 가만 생각해보니 java Test.class 라고 입력하면 Test 라는 패키지에 class 라는 클래스를 찾나 보다 -_-;;;
※ 패키지가 있는 java 파일 커맨드에서 컴파일하기
sample 패키지 Test.java
package sample;
public class Test {
public static void main(String[] args) {
System.out.println("Hello Everyone~");
}
}
컴파일
javac -d . Test.java요래 컴파일하면 현재 디렉토리 아래로 sample 디렉토리가 생성되고 거기에 Test.class 가 컴파일 된다.
실행
java sample.Test
2011/10/23 - [maven] - Sonatype Nexus #1 : 톰캣에 설치하기
2011/10/23 - [maven] - Sonatype Nexus #2 : 설정 및 maven 과 연결하기
2011/10/26 - [maven] - maven 으로 executable jar 맨들기(maven-jar-plugin, maven-dependency-plugin 이용)
2011/10/11 - [이클립] - A java Runtime Environment(JRE) or Java Development Kit(JDK) must be ~~~~ 하면서 이클립스가 실행안될때.
2011/09/27 - [Java] - JDK 설치시 이것저것 물어보는 대화창 없이 커맨드창에서 한번에 쭉 설치하기(Winodws)
2011/10/23 - [maven] - Sonatype Nexus #2 : 설정 및 maven 과 연결하기
2011/10/26 - [maven] - maven 으로 executable jar 맨들기(maven-jar-plugin, maven-dependency-plugin 이용)
2011/10/11 - [이클립] - A java Runtime Environment(JRE) or Java Development Kit(JDK) must be ~~~~ 하면서 이클립스가 실행안될때.
2011/09/27 - [Java] - JDK 설치시 이것저것 물어보는 대화창 없이 커맨드창에서 한번에 쭉 설치하기(Winodws)
'Java' 카테고리의 다른 글
| JAVA/JSP SQL Injection 해킹 방지를 위한 코딩 (5) | 2011.11.16 |
|---|---|
| Java Map 반복(Iteration)시키는 3가지 방법 (5) | 2011.11.13 |
| WAS(Tomcat 또는 기타등등~) 메모리 사용현황 모니터링 JSP (3) | 2011.10.18 |
| Runtime 에 jar 파일 클래스패스에 추가 시키기 : RuntimeJarLoader (1) | 2011.10.10 |
| Jetty Scanner 를 이용한 특정 디렉토리 및 파일 변경사항(delete, change, add) 모니터링하기 (0) | 2011.10.05 |
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 |
자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
jQuery Plugin 2011. 11. 7. 15:59
jquery.blinghover-0.1.js링크같은걸 롤오버 했을때 색깔이 바로 훅 바뀌지 않고, 보드랍게 에니메이션 처리되면서 서서히 색깔을 바꾸게 해주는 훌러그인이다.
※ 설치 (jquery 와 jquery-ui 훌러그인이 필요하다.)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> <script src="jquery.blinghover-0.1.js" type="text/javascript"></script>
사용법 및 데모
1. 디폴트
<script type="text/javascript">
$("a").blingHover();
</script>
<a href="#">테스트 링크1</a>
<a href="#">테스트 링크2</a>
<a href="#">테스트 링크3</a>
2. 롤오버 컬러지정
<script type="text/javascript">
$("a.test1").blingHover("rgb(0, 255, 0)");
</script>
<a href="#" class="test1">테스트 링크4</a>
<a href="#" class="test1">테스트 링크5</a>
<a href="#" class="test1">테스트 링크6</a>
3. 롤오버 컬러지정
<script type="text/javascript">
$("a.test2").blingHover("#ff8600");
</script>
<a href="#" class="test2">테스트 링크7</a>
<a href="#" class="test2">테스트 링크8</a>
<a href="#" class="test2">테스트 링크9</a>
4. 롤오버 에니메이션 시간 및 컬러지정
<script type="text/javascript">
$(".demo_links span.test3").blingHover({color:"#ff8600",time:500});
</script>
<span class="test3">테스트 span10</span>
<span class="test3">테스트 span11</span>
<span class="test3">테스트 span12</span>
테스트 span10
테스트 span11
테스트 span12
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/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/08/30 - [jQuery Plugin] - jQuery Plugin : Slider
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/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/08/30 - [jQuery Plugin] - jQuery Plugin : Slider
'jQuery Plugin' 카테고리의 다른 글
| jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) (3) | 2012.05.29 |
|---|---|
| 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자) (5) | 2011.11.18 |
| jQuery datepicker 팝업창 사이즈 바꾸기 (3) | 2011.11.06 |
| jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기 (1) | 2011.11.06 |
| 자작 훌러그인 : jQuery monthPicker Plugin v0.1 (2) | 2011.09.19 |
