테스트 사이트 - 개발 중인 베타 버전입니다

기초적이지만 자주 쓰이는 Jquery 팁 20가지

· 12년 전 · 5635 · 7

1. 커서 변경

$('body').css('cursor', 'default');

$('body').css('cursor', 'wait');

2. Select Box에서 선택된 Value 찾기

$('#search_sale_pernr_s option:selected').val();

3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기

$("#data_list_table > tbody").children("tr:not(:first)").remove();

4. Table의 마지막 Row 다음에 Row 추가하기

$("#data_list_table > tbody:last").append("<tr><td>값1</td></tr>");

5. innerHTML값 Setting하기

$("#id_total_price").html("<strong>값</strong>");

6. 해당 ID로 지정된 HTML 보이기/숨기기

$("#placeholder").show();

$("#placeholder").hide();

7. ID로 지정된 Form Submit 하기

$("#csf_tab_menu_form").attr("target", "_top");

$("#csf_tab_menu_form").attr("action", "/sabisung/list.jsp");

$("#csf_tab_menu_form").submit();

8. Select Box의 Option 값 확인

$("#search_sale_unit").find("option").each(function() {

alert(this.value);

});

9. Select Box의 특정 값을 가지는 Option 삭제하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "4") {

//alert(this.selected);

$(this).remove();

}

});

10. Select Box의 특정 값 이후/이전에 Option 추가하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

$(this).after("<option value=\"4\">텍스트</option>");

//$(this).before("<option value=\"4\">텍스트</option>");

return false;

}

});

11. each Loop에서의 break/continue 방법

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

return false; //break 의미

return true; //continue 의미

}

});

12. Select Box의 모든 Option 삭제 후 Default Option 추가하기

$("#search_sale_pernr_s").find("option").remove().end().append("<option value=\"\">::사원 선택::</option>");

13. checkbox의 전체 갯수와 선택된 갯수 구하기

- 전체 갯수 : $("input:checkbox[name=is_check]").length

- 선택된 갯수 : $("input:checkbox[name=is_check]:checked").length

- 전체 checkbox 순회하기

$("input:checkbox[name=is_check]").each(function() {

this.checked = true;

});

14. checkbox의 체크 여부 확인

if($("input:checkbox[name=complete_yn]").is(":checked")) == true) {

; //작업

}

15. Table의 특정(ID를 가지는) TR 다음에 TR Row를 추가하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).after("<tr><td>사비성</td></tr>");
return false;
}
});

16. Table의 특정(ID를 가지는) TR Row를 삭제하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).remove();

return false;
}
});

17. 숫자인지 체크

function is_number(v) {
var reg = /^(\s|\d)+$/;
return reg.test(v);
}

18. 숫자인지 체크 (-/+ 부호까지 체크)

function is_number(v) {
var reg = /^[-+]?\d+$/;
return reg.test(v);
}

19. 소수점 자리수에 맞는 숫자인지 체크 (소수점 2자리까지 체크)

function is_float_2(v) {
var reg = /^[-+]?\d+.?\d?\d?$/;
return reg.test(v);
}

20. 숫자에 콤마 추가하기 (금액단위)

 function set_comma(n) {
var reg = /(^[+-]?\d+)(\d{3})/;
n += '';
while (reg.test(n))
n = n.replace(reg, '$1' + ',' + '$2');

return n;
}

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 7개

12년 전
좋네요 ㅋㅋ 굿~~~
12년 전
감사요 ^^
감사합니다.
12년 전
좋은자료 감사
오굳
굿드
12년 전
감사합니다.

게시글 목록

번호 제목
27182
27176
18634
5442
18632
18629
5435
18627
18626
18623
5409
18621
18617
18615
18614
18608
27162
18607
5405
18606
18605
5401
27152
5397
18603
27144
20667
20666
24485
20651
20632
20620
20607
18602
30749
5396
18601
18599
18596
20590
18589
18587
18586
18585
18584
5387
27106
18583
18580
18579
27120
18574
18570
18566
18562
18558
26490
30733
18554
20572
20541
5377
18553
5373
20534
20531
20527
20525
20519
20513
20507
20503
20496
20490
20483
20471
20464
20447
20419
20405
30729
18549
18544
32084
32083
32082
32081
30728
27097
18537
27092
32080
32079
32078
32077
32076
32075
32074
32073
32072