자주 쓰이는 Jquery 팁 20가지 입니다.
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;
}
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5396 | 기타 |
슈퍼스타맨
|
4개월 전 | 358 | |
| 5395 | PHP |
untitled
|
6개월 전 | 828 | |
| 5394 | MySQL |
선택과집중
|
6개월 전 | 605 | |
| 5393 | 웹서버 |
techstar
|
8개월 전 | 868 | |
| 5392 |
|
1년 전 | 1225 | ||
| 5391 | 10개월 전 | 1125 | |||
| 5390 | 10개월 전 | 912 | |||
| 5389 | 9개월 전 | 881 | |||
| 5388 | 9개월 전 | 983 | |||
| 5387 | 8개월 전 | 815 | |||
| 5386 | JavaScript |
nekoieye
|
9개월 전 | 979 | |
| 5385 | 웹서버 | 9개월 전 | 994 | ||
| 5384 | JavaScript |
|
9개월 전 | 824 | |
| 5383 | 기타 | 10개월 전 | 1135 | ||
| 5382 | 기타 |
|
10개월 전 | 584 | |
| 5381 | JavaScript | 10개월 전 | 915 | ||
| 5380 | 기타 |
|
11개월 전 | 702 | |
| 5379 | JavaScript | 11개월 전 | 700 | ||
| 5378 | 11개월 전 | 1203 | |||
| 5377 | 기타 |
|
11개월 전 | 768 | |
| 5376 | jQuery |
|
11개월 전 | 585 | |
| 5375 | jQuery |
techstar
|
11개월 전 | 738 | |
| 5374 | 기타 |
|
11개월 전 | 788 | |
| 5373 | MySQL |
|
1년 전 | 819 | |
| 5372 | 기타 |
|
1년 전 | 1021 | |
| 5371 | JavaScript |
|
1년 전 | 734 | |
| 5370 | JavaScript |
|
1년 전 | 738 | |
| 5369 | PHP |
|
1년 전 | 1249 | |
| 5368 | PHP | 1년 전 | 1417 | ||
| 5367 | 기타 |
nekoieye
|
1년 전 | 1292 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기