jQuery (4) 썸네일형 리스트형 [Jquery] 클릭한 특정 영역 id,class 없이 삭제하기 제이쿼리를 이용해서 특정 영역을 삭제하는 방법이다 화면에서만 삭제할 수 도있고, 서버랑 통신을 통해 데이터를 삭제할 수도 있다 방법은 아래 예제와 같이 작동된다 1 예를 들어 아래와 같이 리스트 데이터를 가지고 왔을 때, JSTL을 이용해서 반복해서 데이터를 그려준다 그려줄 때, li 태그에 onclick 속성을 이용해서 remove함수를 호출해준다 remove 함수의 파라미터로는 this를 넣어주어 클릭한 li 태그를 지칭하게 해준다 만약 여기서 id나 class를 이용해서 지칭하게 하면, 삭제 함수를 실행했을 때, 시스템 적으로 오류가 생길 수 있다 (중복 class가 들어가거나, 그러면 안되지만 id가 중복되거나 ..) JSTL DATA ${list.name } Colored by Color Scr.. [Jquery] Jquery 데이터 테이블 (datatable) 드래그 앤 드롭(drag and drop) 사용하기 reorder 데이터테이블을 쓰면서 테이블 데이터를 드래그앤 드롭으로 이동시키고 싶을 때가 있다. dataTable에 있는 수많은 기능 중, reordering 기능을 이용해서 컬럼을 drag and drop 할 예정이다. 1 2 3 4 5 6 7 8 9 Colored by Color Scripter cs 먼저 datatable을 사용하기 위한 cdn,(jquery, jquery-ui, datatables reorder)을 추가해준다. cdn으로 추가해도 되지만, 나는 프로젝트 내부에 파일을 추가해서 사용했다. https://datatables.net/ DataTables | Table plug-in for jQuery DataTables Table plug-in for jQuery Advanced tables, in.. [Jquery] 특정 영역만 새로고침(F5) 하는 기능 모든 페이지를 Reload 시키지 않고, 특정 영역에서만 새로고침하려고 할 때, Jquery 내부의 load 함수를 사용한다. [예제] 1 2 3 4 5 6 reloadDivArea(); //함수 실행 function reloadDivArea() { $('#divReloadLayer').load(location.href+' #divReloadLayer'); } Colored by Color Scripter cs divReloadLayer라는 id값을 가진 요소를 새로고침한다 * 주의 location.href+이후 특정 영역을 입력해줄 때, 빈 칸 하나를 입력해주지 않으면 오류 발생 [JAVASCRIPT] 팝업 DIV 창, 다른 영역 클릭해서 닫기 1 2 3 4 5 6 7 8 9 function initMouseClickEvent(){ $(document).mouseup(function(e){ var sch_container = $("DIV명"); if(sch_container.has(e.target).length ===0) sch_container.hide(); }); } Colored by Color Scripter cs mouseup 이벤트를 이용해서, 생성된 DIV 팝업 창의 외부 영역을 클릭했을 때, 해당 DIV 창의 옵션을 변경함으로써 팝업을 숨긴다. 이전 1 다음