본문 바로가기

반응형
jQuery
반응형
18

[Jquery] selectbox & radio 선택 유지하는 방법 안녕하세요. 오늘은 삼항조건연산자를 통해 selectbox&radio 선택 유지 방법에 대해 이야기해보겠습니다. 조건부 삼항 연사자란, JavaScript에서 세 개의 피 연산자를 취할 수 있는 유일한 연산자 입니다. 이렇게 정의하니 저도 모르겠군요... 코드를 보면서 설명해보겠습니다. 삼항연산자 식은 이렇습니다. (조건) ? (참일 때 실행할 코드) : (거짓일 때 실행할 코드); 실제에 응용한다면.. 보통의 select문에서 항목중에 선택을 하게 되면 VO안에 담기게 되죠. 아래 문구를 해석하면 1 $("select[name=road_x1]").val((("${searchVO.road_x1}" == '') ? "" : "${searchVO.road_x1}")).prop("selected", true).. 2021. 3. 24.
Spring 홈페이지 - (13) 게시판 페이징 작업 오늘은 게시판 페이징을 해보겠습니다. 제가 한 방식은 전자정부프레임워크에서 사용되는 방식을 변형하여 만들었습니다. 제가 사용하던 방식이라 복습차원이기도하고 실제로도 다른 방식보다 편리합니다. 새로 작성한 AJAX 페이징 방식 글입니다!! 구현하실 분들은 참고해주세요! https://chobopark.tistory.com/249 AJAX 페이징 구현 방법!! (영상 有) 안녕하세요. 오늘은 AJAX로 페이징 처리하는 방법에 대해 이야기해보겠습니다. 저는 자바를 기반으로한 AJAX 페이징 처리 방법을 정리하였습니다. 우선 AJAX 에 대해 이야기해보겠습니다. Ajax란 Asyn chobopark.tistory.com 우선 페이징을 하기 위해서는 파라미터를 통해 페이징 처리를 하기 때문에 클래스를 만들어 변수.. 2021. 3. 1.
[Java&Javascript] 데이터베이스 숫자 값을 콤마 붙여 가져오고 빼서 내보내는 방법!! (2021년 5월 20일 자바 방법을 추가하였습니다.) 안녕하세요. 오늘은 데이터베이스에 있는 숫자데이터를 콤마 붙여서 사용하고 빼내서 다시 데이터베이스에 넣는 방법에 대해 알아보겠습니다. 데이터베이스에 콤마가 아닌 상태에서 콤마 데이터가 넘어가면 오류가 발생하기 때문에 빈번히 사용됩니다. 아래와 같이 데이터베이스에 숫자값이 있습니다. 이것을 콤마 찍히게 html상에서 보여줘야합니다. HTML input 칸을 만들어줍니다. id값과 name값을 넣어줍니다.. 원 Javascript 데이터베이스 콤마 붙여 가져오는 방법과 내보내는 방법을 나눠하겠습니다. 데이터베이스로부터 콤마 붙여 가져오는 방법 script 스크립트 안에 getMoneyFormat 함수를 작성합니다. 이 함수안에는 콤마를 붙이는 정규식이 .. 2021. 2. 24.
[JQuery]URL 정규표현식 및 유효성검사 방법 안녕하세요. 오늘은 URL만을 입력할 수 있는 정규식표현과 이에따른 유효성검사를 알아보겠습니다. 우선 정규표현식이란 문자열의 특정 패턴을 찾고, 찾은 패턴을 가지고 추출, 삭제, 치환 등 문자열을 컨트롤 할 수 있는 표현식이라 할 수 있습니다. 또한 유효성검사란 이름의 셀 값을 사용자가 지정한 포맷에 맞는지 자동으로 확인해주는 기능입니다. 저는 url만을 입력해주는 칸이 필요해서 만들어보았습니다. URL주소를 입력할 경우 등록하시겠습니까란 알림창이나오고 잘못입력할 경우 경고 알람창이 뜨도록 하였습니다. HTML 입력할 수 있도록 input을 생성하고 등록버튼과 취소버튼을 생성합니다. 등록버튼에 onclick으로 함수를 넣어 유효성검사를 할 수 있도록 합니다. 1 2 3 4 5 6 7 8 9 10 11 1.. 2020. 12. 29.
[Jquery]특정값에 대한 SelectBox 선택불가 기능 구현 안녕하세요. 오늘은 특정 값이 0일경우 select박스를 선택할 수 없도록 해보려합니다. 우선 위의 기능을 구현하기 위해 제이쿼리에서 필요한 문법을 정리해보았습니다. disabled : input태그가 비활성화됩니다. .pop() : 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나, 속성을 추가합니다.(javascript속성) .not() : 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. =* : 속성 값에 문자열이 포함 되어 있는 경우를 찾습니다. 아래 그림을 보면 툭정값이 0이 일때 jquery에서 disabled를 사용하여 선택이 안되도록 만들었습니다. 테스트 1의 값 = 1 테스트 2의 값 = 1 테스트 3의 값 = 0 HTML 각각의 select박스에 id를 부여하고 값을 넣어.. 2020. 12. 1.
여러 개의 Select 값을 하나의 컬럼으로 합치는 방법 여러 개의 Select 값을 하나의 컬럼으로 합치는 일이 간혹 생깁니다. 예를 들어 날짜가 있겠네요. 년월일시분초 이 각각의 값들을 하나의 컬럼으로 합치는 방법을 정리해보겠습니다. 요약하자면 select부분에서 id값으로 제이쿼리에서 읽을 수 있도록 설정합니다. submit으로 제이쿼리로 넘겨주면 var을 통해 만든 변수에 id값을 넣어주고, 값을 넣을 컬럼(prom_rec_sdate)에 select id 항목들을 집어 넣습니다. 그리고 가장 중요한 부분은 값이 적용될 수 있도록 form태그 안에 hidden 값으로 값을 넣을 컬럼(prom_rec_sdate)을 넣어주면 끝입니다! 글은 아무리 잘 써도 모르는 부분에 있어서는 이해가 잘 안되는거같아요 ㅎㅎ 코드를 통해 확인해 보겠습니다. JSP selec.. 2020. 9. 29.
제어쿼리 Form Action 값 변경 안녕하세요. 제이쿼리 Form Action 값 변경에 대해 이야기해보려 합니다. (2021년 3월 13일자로 내용 수정하였습니다.) 흔히 아래와 같이 Form에서 action값을 이용하여 컨트롤러로 보냅니다. 제가 겪었던 상황은 일반 사용자일 경우, 시설의 사용 허가 조건 서약을 작성하는 것이였고, 관리자일 경우는 이 경우를 뛰어넘어 바로 예약으로 넘어가는 상황을 만들어야 했습니다. 허나, 폼 값의 action값이 하나이기 때문에 제이쿼리에서 변경하여 구현한 사례입니다! 제이쿼리를 통해서 아래와 같이 작성해 보았습니다. 1 2 3 예약하기 /div> Colored by Color Scripter cs 우선, 예약하기 버튼에 onclick으로 설정되어 있는 fnResve();를 제이쿼리에서 아래와 같이 선.. 2020. 6. 12.
[HTML&JQUERY & SPRING] 버튼 클릭 시, 숫자 증감/감소 기능 안녕하세요. 버튼을 클릭할 경우에 숫자가 증가하고 감소하는 기능을 구현하려 합니다. (코드를 재수정하였습니다.2020년 12월) 화면 부분부터 보면.. HTML 부분입니다. 1 2 3 4 5 6 7 8 9 수량 7 + - Colored by Color Scripter cs button onclick 속성에 값을 넣어주고 this 를 넣어 자기 자신 값을 부여합니다. 또한 p와 m을 넣어줘서 type을 구분할 수 있도록 합니다. input 에서는 디비와 연동할 수 있도록 name 값을 넣어줍니다. 다음은 SCRIPT 부분입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 function fnCalCount(type, ths){ var $input = $(ths).parents("td").find.. 2020. 2. 28.
[HTML&JQUERY] 리스트 삭제 버튼 구현 안녕하세요. 버튼을 통해서 행을 지우는 방법에 대해 알아보겠습니다. 보통의 HTML 리스트 형태는 아래와 같습니다. (코드를 재수정하였습니다 2020년 12월) 리스트 항목을 삭제하기 위해서는 마지막 항목에 삭제 버튼을 넣어준 뒤, 제이쿼리를 이용해 선택 행을 지우는 작업이 필요합니다. HTML tbody 안에 button 태그를 입력한 후에 함수에서 받을 수 있도록 onclick 속성에 값을 입력한다. 이때 자신을 선택하도록 (this)를 넣어줍니다. 1 2 3 4 5 6 7 8 9 10 11 수량 + - X Colored by Color Scripter cs SCRIPT 스크립트 부분에서 onclick 값을 선언한 후에 행을 지우기 위해 부모값 ("tr")을 선언한 후, remove를 작성하면 완료가.. 2020. 2. 26.