본문 바로가기
728x90

프로그래밍 공부/Javascript6

[javascript/jQuery] 속성이 특정 문자로 시작하는, 끝나는, 포함하는 요소 가져오기(선택자) id, class, name 등의 속성이 특정 문자로 시작하는, 끝나는, 포함하는 요소 가져오기 우선 속성 값이 특정문자로 '시작하는' 요소를 가져오는 예시입니다. 위와 같이 요소가 2개 있을때, javascript에서 "box" 로 시작하는 요소를 모두 가져오려면 아래와 같이 사용하면됩니다. $("input[name^=box]") 이 때, name이 아닌 id, class 를 사용하더라도 사용법은 동일합니다. $("input[id^=box]") $("input[class^=box]") 동일한 방식으로. 속성값이 특정 문자로 끝나는, 포함하는 경우에는 ^=가 아닌 $=, *= 를 써서 적용할 수 있습니다. $("input[name^=box]") $("input[name$=box]") $("input[na.. 2023. 8. 30.
javascript) 팝업창(새 창) 띄우는 법 javascript 팝업창(새 창) 띄우는 법 window.open(url, 팝업명, 팝업옵션) (예시) window.open("https://tistory.com", "pop", "width=500,height=500,top=100,left=200,location=no") 여기서 팝업명은 고유의 id라고 볼 수 있고, 작성하는 사람이 임의로 설정하면 됩니다. 만약 "pop1"이라는 팝업명으로 팝업을 하나 연 상태에서 동일하게 "pop1" 으로 다른 링크의 팝업을 연 경우 기존 열려있던 팝업창이 새로운 링크로 이동하게 됩니다. 팝업옵션은 아래 속성들이 있습니다. 2023. 4. 9.
Javascript) 숫자만 입력 + 3자리마다 콤마(,) 표시하기 예제 자바스크립트 화폐 /금액 입력 예제 (숫자만 입력 + 3자리마다 콤마 표시) 보통 input 박스에 금액을 입력할 때에 천 단위인 3자리마다 콤마를 찍도록 제어하는데요, 여기에 숫자만 입력하도록 제어가 함께 들어가도록 예제를 작성해보겠습니다. 정규식을 사용하는 방법도 있지만, 자동으로 콤마를 찍어주는 toLocalString() 을 사용했습니다. toLocalString()은 Number()로 문자열을 숫자형으로 바꾼 후 사용 가능합니다. 1. 자바스크립트 함수 부분 function onlyNumberWithComma(obj) { var number = obj.value; //숫자가 아닌 값 모두 replace 해주기 number=number.replace(/[^0-9]/g,''); //콤마 표시 num.. 2023. 1. 8.
HTML) 테이블 행, 열 colspan, rowspan으로 병합하기 + 예제 HTML) 테이블 행, 열 colspan, rowspan으로 병합하기 + 예제 오늘은 Javascript에서 테이블 내 td, th를 병합하는 방법을 정리해보겠습니다. 1. 세로(행) 병합하기 (rowspan) 예를 들어, 지원자 데이터를 테이블로 그린다고 가정하여 아래 테이블을 만들어보았습니다. 지역 이름 서울 김OO 서울 박OO 경기 유OO 부산 장O 부산 김OO 위의 코드에서 [지역] 란의 같은 값을 병합하여 아래와 같이 출력하고자 합니다. 이 경우 rowspan 을 사용하여 병합을 해줍니다. 지역 이름 서울 김OO 박OO 경기 유OO 부산 장O 김OO 같은 값 반복이 시작되는 첫 행의 td에서, 몇 번 아래로 반복할 것인지의 횟수를 이런식으로 작성하고, 반복되는 아래 행들에서는 td를 삭제해주시면.. 2022. 11. 13.
[Javascript] Input박스에 숫자만 입력 가능하게 제어하기 [Javascript 자바스크립트] 텍스트 인풋 박스에 숫자, 혹은 특수문자만 입력 가능하게 제어하기 오늘의 글은 텍스트 인풋 박스에 숫자 혹은 숫자와 특수문자만 입력 가능하게 제어하기 입니다. 더 세세하게 제어할 수 있는 방법들도 있겠지만, 간단히 제어할 때 사용하는 방법입니다. 주로 전화번호 등을 입력받을 때 숫자 외의 문자가 들어가지 않도록 제어하기 위해 사용합니다. 방법은 크게 (1) event를 사용한 방법, (2)정규식을 사용한 방법으로 나뉘며 궁극적으로 저는 두 가지 방법을 함께 사용했습니다. 그 이유는 아래에 나와있습니다. 1. event를 사용한 방법 1-1 . key를 사용한 방법 function checkNumber(event) { if(event.key >= 0 && event.ke.. 2021. 3. 2.
[JavaScript/JQuery] 테이블 이벤트 발생 시 같은 행의 요소 선택되게 하기(parent, siblings, children) [JavaScript/JQuery] 에서 이벤트 발생 시 같은 행()의 다른 열() 다루기, 변경하기(parent, siblings, children) 테이블 내에서 한 요소를 CLICK, 혹은 CHANGE 해서 이벤트를 발생시켰을때 같은 속 다른 자식 요소의 변화를 만들고 싶다면, 제이쿼리의 parent, siblings, children 함수를 사용할 수 있다. (ex) ... (결과) (tdselect 안의 selectbox) (tdtext 안의 textbox) 이러한 상황일 때, select 의 값을 변경했을 때 그 값을 같은 라인의 다른 인 input 에 넣고 싶다면 function 함수명(arg){ var str = arg.val(); $(arg).parent().siblings('.tdtex.. 2020. 8. 6.
반응형