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

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

· 12년 전 · 5634 · 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년 전
감사합니다.

게시글 목록

번호 제목
26447
26436
5279
5276
30674
18417
18414
5261
27054
5259
5239
18413
31486
18410
18400
30670
5231
18395
18387
18381
30661
5222
18380
27043
18366
24478
18359
30660
18355
18351
18343
18333
31439
18329
18323
27040
30655
5211
31427
5205
5193
5184
18317
27032
18313
30647
31408
30644
18306
18303
18288
27028
18285
31383
27024
5174
18276
27017
27130
18274
26427
5170
5160
5157
31371
27010
18267
27003
30636
18265
31350
18262
26998
18260
26992
26988
18259
31328
26986
18257
26983
5154
26975
24474
31309
26966
31251
18253
31218
31201
26957
26954
5147
5139
18248
5132
26947
31189
30631
26939