jQuery
-
동적으로 생성한 태그에 이벤트 적용하기개발/Javascript & jQuery 2019. 7. 20. 11:27
고객의 변덕으로 인해 체크박스를 동적으로 생성하여 출력한 뒤 체크박스를 선택할 때마다 문구를 자동 완성하여 출력해주도록 코드를 짰다. 평소와 다름없이 1 2 3 4 $('input[name=chkBox]').on('click', function(){ console.log(this); }); Colored by Color Scripter cs 를 써봤는데 콘솔창에 아무것도 안 찍힌다. 원래 아래처럼 쓰면 동적으로 생성된 태그에 안 먹히고 위처럼 선언하면 되는게 아니었나...? 1 2 3 $('input[name=chkBox]').click(function(){ console.log(this); }); Colored by Color Scripter cs 이 onClick 이벤트를 $(document).rea..
-
ajax로 파일(multipart/form-data) 전송하기개발/Javascript & jQuery 2019. 4. 17. 22:51
AS-IS 소스에서는 사용자가 선택한 파일을 업로드하는 소스를 1 2 3 4 Save Colored by Color Scripter cs 이런 식으로 구현했으나 TO-BE로 전환하면서는 파일 업로드 후 자바스크립트 단에서 콜백함수를 호출하도록 만들고 싶어서 방식을 조금 바꿔봤다. 1 2 3 4 Save Colored by Color Scripter cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(function(){ $('#uploadBtn').on('click', function(){ uploadFile(); }); }); function uploadFile(){ var form = $('#uploadForm')[0]; var form..
-
동적으로 추가된 셀렉트박스에서 원하는 옵션 선택하기개발/Javascript & jQuery 2019. 3. 6. 11:13
동적으로 셀렉트 박스에 옵션을 생성하여 추가해준 후,특정 이벤트 발생에 따라 원하는 옵션을 선택해줘야 할 때가 아주 많이 발생한다... 그럴 때는 당황하지 말고 이렇게 12345//옵션 순서를 알 경우 : 선택하고자 하는 옵션 순번을 명시하여 선택$("#selectBox option:eq(n)").prop("selected", true); //해당 옵션의 value를 알 경우 : 선택하고자 하는 value를 명시하여 선택$("#selectBox").val("값").prop("selected", true);cs 해주면 된다. 처음에는 attr()을 써서 시도해보았으나 안되길래 찾아봤더니 동적으로 추가된 요소에 대해서는 attr() 이 안 먹는 모양
-
[jqGrid] 그리드 내 행마다 수정/삭제 버튼 삽입하기개발/Javascript & jQuery 2019. 1. 24. 12:24
jqGrid를 쓰다보면 언젠가 아래 이미지처럼 그리드의 행마다 수정 삭제 버튼을 넣어줘야 하는 경우가 생길 수도 있다. 출처는 요 아래http://trirand.com/blog/jqgrid/jqgrid.html → Functionality > Formatter actionshttp://www.guriddo.net/documentation/guriddo/javascript/user-guide/formatters/ 실제 소스에 적용한다면 이런 느낌으로 들어간다. 123456789101112131415161718192021222324252627282930 $$("#list").jqGrid({ url: "url", datatype : "json", mtype: "post", colNames:[ ' ', 'id'..
-
jqGrid 위키문서 정리 - 플러그인 특징 및 설치개발/Javascript & jQuery 2018. 4. 23. 11:39
준비 중인 프로젝트에서 jqGrid를 사용하는데 내가 유일한 초기 투입 개발자니까 미리 준비하면 좋겠다고 하셔서 공부를 시작했다.요기에 정리되어 있는 공식문서를 공부할 겸 따로 정리해본당 → http://www.trirand.com/jqgridwiki/doku.php?id=wiki:features 1. 특징1) 기본 그리드• UI테마에 기초한 CSS 사용 : jQueryUI의 테마를 활용하여 그리드를 표현→ jQueryUI 테마 다운로드 필요• 페이징 : 페이징 기능을 사용하여 데이터 출력 가능하며, 한 페이지에 총 몇 행을 출력할지는 개발자가 지정할 수 있음• 사용자가 컬럼 너비 조정 가능• 데이터 정렬 : 사용자가 헤더를 클릭하여 데이터 정렬 가능. 개발자가 특정 타입을 기준으로 데이터 정렬하도록 지..
-
달력 그리기개발/Javascript & jQuery 2018. 2. 22. 16:55
문득 자바스크립트를 써서 달력을 그리면 좋겠다는 생각이 들었다. 찾아보니 역시 훌륭하신 분들이 공개해주신 소스가 많았다.그중 아래 소스가 제일 맘에 들어서 저장 http://jsfiddle.net/radlohead/8b44ft0w/ DOCTYPE html> Making Calendar .wrap { width: 500px; margin : 0 auto; } .btn-holder { text-align: center; margin : 10px 0 10px 0; } #calendar table { text-align : center; border-collapse : collapse; } #calendar table thead td { height : 30px; font-weight : bold; } #cal..
-
데이터 정렬하기개발/Javascript & jQuery 2018. 2. 7. 13:58
배열 내 데이터를 정렬할 일이 생겼을 때, 편하게 sort 함수나 reverse 함수를 써서 정렬할 수도 있고괜히 정렬 알고리즘을 짜서 정렬할 수도 있다.오늘은 한가하니까 두 방법을 모두 써서 배열 내 데이터를 정렬했다. 1. Array.prototype.sort(), Array.prototype.reverse() 를 사용하여 정렬 오늘은 작정하고 공부를 하는 날이니까 여유롭게 기술문서를 보러갔다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sort() 함수에 대한 기술을 먼저 보러 갔더니 눈에 띄는 구절이 있다. sort () 메서드는 배열의 요소를 적절한 위치에 정렬하고 배열을 반환합니다..
-
기본 로직을 활용하여 특별한 날 생성하기개발/Javascript & jQuery 2018. 2. 6. 16:23
다이어터에게 보상데이가 있는 것처럼, 자기 자신에게 선물을 주는 날을 만든다는 사람의 글을 봤다. 한달에 하루나 이틀 정도 날을 잡아서 그날만큼은 자기가 좋아하는 간식을 사먹는다는 그 아이디어가 정말 귀엽고 좋다고 생각했다. 하루에 만원쓰기 운동을 시작한지 며칠 안됐지만 벌써부터 지쳐가는 내 자신을 한심하게 보느니그냥 이렇게라도 숨통을 틔워줄 겸, 마침 지금 혼자서 만들고 있는 가계부 프로그램에 도입해도 좋을 것 같다는 생각도 들어서 잠깐 코드를 짜봤다. 기본적인 로직은 로또 번호 발생기와 동일하다.여기에 특별한 날을 한달에 2일 이상 잡을 경우 오름차순으로 정렬하여 출력하는 로직만 추가했다. 자바스크립트 내장함수를 몇 개 사용했는데, 이것도 나름 깊이있게 공부하려다보니 쓰잘데기없이 말이 많아져서 따로 ..