본문 바로가기

전체 글

(220)
[JQUERY] 테이블 마우스오버 컬러표시 table mouseover 컬러표시 예제
[JQUERY] footer/div 하단 고정 (스크롤바 이동시 동적으로 변경) footer 하단고정 예제 HTML 하단 필요내용을 입력 CSS footer { position: fixed; z-index: 30; } SCRIPT
[JQUERY] 테이블 td 병합 (rowspan) 동적으로 row병합하는 예제 HTML SCRIPT $(window).load(function () { $(".row_merge").each(function () { var rows = $(".row_merge:contains('" + $(this).text() + "')"); if (rows.length > 1) { rows.eq(0).attr("rowspan", rows.length); rows.not(":eq(0)").remove(); } }); });
[JQUERY] INPUT 합계 구하기 class가 동일한 항목 합계 산출 예제 HTML SCRIPT $('.money1').blur(function () { var seip = 0; $('.money1').each(function(){ //클래스가 money인 항목의 갯수만큼 진행 seip += Number($(this).val()); }); //합계를 출력 $("#seipSum").val(seip); //seipSum에 30입력 });
[JQUERY] .attr() .prop() 차이 .attr, .prop 사용상의 차이 (jquery 1.6 이상부터 구분) attr: 속성을 조회하거나 변경 prop: true/false 값을 가지는 속성 조회하거나 변경 .attr .prop 예제 input type이 hidden인 항목을 submit으로 변경 id가 chk인 항목의 체크박스를 체크 $('#deleteBtn').attr('type', 'submit'); $('#chk').prop('checked', true);
[JQUERY] .val() 내부매서드로 값처리 (substring, replace) ex1) input에 입력된 20200101를 2020-01-01로 변경 HTML SCRIPT $(accfrDt).val(function(i, v) { return v.substring(0,4)+"-"+v.substring(4,6)+"-"+v.substring(6,8); }).val(); ex2) input에 입력된 2020-01-01를 20200101로 변경 HTML SCRIPT $(accfrDt).val(function(i, v) { return v.replace(/-/g,""); }).val();
[JQUERY] 기본구조 $(selector).action() $: 정의 또는 Jquery (): HTML 구성요소 .매서드: 기능 $("*") : 모든항목 $(this) : 현재 HTML항목 $("p.intro") : 에서 intro로 정의된 항목 $("p.first") : 에서 첫번째 $("ul li:first") : 에서 첫번째 항목 $("ul li:first-child") : 모든 에서 첫번째 항목 $("[href]") : href의 모든항목 $("a[target = '_blank']") : target 속성이 '_blank'인 항목 $("a[target != '_blank']") : target 속성이 '_blank'가 아닌 항목 $(":button") : 속성과 type이 button인 항목 $("tr:even") :..
[JQUERY] CheckBox 체크박스 체크 $("input[name= 체크박스명]:checkbox").attr("checked", true); 체크박스 값 호출 $("input[type='checkbox']").val(); //type이 checkbox인 input태그 값 (checkbox가 하나일 경우만 사용) $('.check_class').val(); //class명이 check_class인 항목의 값 $('#check_id').val(); //id가 check_id인 항목의 값 ​ id가 동일한 체크박스에 대하여 선택되어 있는지 확인 : true / false 반환 $("#chkBox").is(":checked") ; $("input:checkbox[id='chkBox']").is(":checked") ; 전체 선택하기 $(..