본문 바로가기

Spring/JavaScript+Jsp(HTMl)39

[js] serialize(), serializeArray() 이용해 form값 한번에 가져오기 serialize(), serializeArray() 이용해 form값 한번에 가져올 수 있다. form값을 이용할 때 유용한 함수이다. serialize() form 객체들을 표준 URL인코딩 표기법으로 텍스트 문자열 생성 - form(폼) 객체들을 한번에 받기 - 표준 URL인코딩 표기법으로 텍스트 문자열 생성 - name속성(attribute) 가 무조건 있어야한다. - 체크박스(checkbox)와 라디오(radio)은 체크 된 경우만 포함 - file의 첨부파일 데이터는 직렬화X - 폼 객체들을 나열함 [ 예시 ] //javaScript + jQuery var serialize = $('#dataForm').serialize(); // id가 dataForm인 form의 내부 값을 직렬화 처리한다.. 2023. 2. 9.
[jQuery] 객체 이동함수 focus() - div focus()안되는 현상 해결방법 input객체는 그냥 focus()만 지정해줘도 해당 위치로 이동이 잘된다. 하지만 div객체는 focus()만 해주면 이동하지 않아 검색결과로 div객체는 focus를 받기 전에 tabindex가 지정되어야 한다. div객체에 속성으로 tabindex를 할당하지 않고 jQuery로 tabindex를 지정한 뒤 focus function을 호출하면 된다. 아니면 div객체에 tabindex속성을 넣어 포커스를 하자! [ div객체에 tabindex속성 추가 후 focus() ] $("#test").focus(); [ div객체에 속성으로 tabindex를 할당하지 않고 focus() 방법 ] //input focus $("#test_input").focus(); //div focus $("#test_di.. 2023. 1. 19.
[js] table 셀 병합(cell merge) rowspan - 1개 결합 & 2개이상 결합 table 셀 병합(cell merge) 기능이 종종 필요합니다. 이럴 경우 rowspan 기능을 사용하여 셀을 병합하면 됩니다. 인터넷에 js 테이블 셀 병합 기능을 검색하면 다 1개만 결합하는 기능만 나옵니다. 2개이상 결합은 잘 나오지 않아서 정리하게 되었습니다. 먼저, 1개의 셀 병합에 대해서 알려드리겠습니다. 1. 테이블 셀 병합 - 1개 결합 //rowspan 처리 - 1개 셀결합 function fn_genRowspan(className){ $("." + className).each(function() { var rows = $("." + className + ":contains('" + $(this).text() + "')"); if (rows.length > 1) { rows.eq(0)... 2022. 12. 28.
[js] select박스 selected 하는 방법(prop, removeAttribute, setAttribute등 활용) select 박스에 selected를 하여 선택하고 싶을 때가 있다. selectBox가 알아서 selected를 해주지만 안되는 경우가 있다. 그럴경우 prop을 사용하면된다. - prop() $('#select1').prop('selected', true); //체크 $('#select1').prop('selected', false); //체크 해제 대부분 이런식으로 하면 된다. 하지만 나는 동적으로 html으로 만들어서 그런지 변경은 되는데 html이 변경이 되지않아서 인식이 잘안된다...ㅠ 그래서 그냥 selected를 다 삭제하고 선택하는 방법을 선택하였다. (정말 하고싶지 않았던 방식ㅜㅜ) 아래 코드와 같이 만들었다. //class = 'select1' 를 가지고 있는 selectbox가 많음.. 2022. 12. 20.
[JS] 동적 html을 만들고 이벤트가 안 될 경우 대처법 (click, change 등) 동적으로 ajax를 사용하여 html을 만든 후 click, change이벤트가 안되는 현상을 발견하였다. 나는 on이벤트를 사용하여서 했는데 작동이 안되었다. $('.testSelect').on('change',function(){ //이벤트내용 }); 1. $(document).on 을 사용 $(document).on('click','#test',function(){ //Event내용 }); 2. click 이벤트 사용 $('#test').click(function(){ //이벤트 내용 }); 1번으로 하면 잘되었다. 안된다면 2번 방법도 한번 써보세요! 2022. 12. 20.
728x90