본문 바로가기

javascript

 (8)
table의 head 버튼을 클릭하여 정렬하기 테이블에 있는 row 데이터들을 컬럼별 정렬하기 위해 오름차순, 내림차순 버튼이 각 컬럼의 th에 위치할 때 동작 코드이다. function sortTable(columnIndex, direction) { const tbody = document.getElementById('myTable'); const rows = Array.from(tbody.querySelectorAll("tr")); // 행 정렬 rows.sort((a, b) => { const aValue = getCellValue(a.cells[columnIndex]); const bValue = getCellValue(b.cells[columnIndex]); if (direction == 'asc') { return aValue.locale..
동적으로 생성한 table arccordion (+체크박스 핸들링) 테이블의 상위 row 항목을 클릭했을 때 하위 row 항목이 펼쳐졌다 접혔다 하는 기능을 구현해보았다. 더불어 체크박스도 각 항목별로 전체 체크 및 전체 체크 해제도 필요해서 추가해주었다. head1 sub1-1 sub1-2 head2 sub2-1 html 테이블을 작성해준다. 예시를 위해 직접 row를 명시했지만 ajax로 동적 추가를 해주는 테이블에도 적용할 수 있도록 class명을 사용하였다. 상위 row의 class명을 headRow로 주고 하위 row의 class명을 subRow로 주었다. $(function() { $('.subRow').hide(); }); // 체크박스 핸들링 function checkHeadCheckbox(checkbox) { var isChecked = $(checkbo..
클릭 시 div 및 text가 바뀌는 toggle event 텍스트를 클릭하면 텍스트가 변경되고 div가 접히거나 펼쳐지는 기능을 구현해보았다. html ▼펼침 js $("#divToggle h4").click(function(){ $("#divImg").toggle("show"); $(this).text($(this).text()=="▼펼침"?"▶접음":"▼펼침"); })
계층형 selectBox 구현하기 계층형으로 DB에 저장되어 있는 값을 가지고 상위 레벨의 selectBox를 선택하면 하위 레벨의 selectBox가 생성되는 기능을 구현해보았다. 선택 ${list.name} 처음 페이지를 불러올 때 최상위 ROOT 데이터는 받아온 상태이므로 표출시킨다. id는 공통되는 이름과 레벨 단위를 조합하여 만든다. $(document).ajaxStop(function(){ $("[id^='list_']").change(function() { fnList($(this).attr("id"), $(this).val()); }) }); 공통으로 시작하는 id에 change 이벤트를 걸고, 선택한 selectBox의 id와 value를 파라미터로 받는 function을 만들어준다. select 태그 id에 val() ..
jsp를 팝업으로 띄우기 (파라미터에 특수 문자가 들어갈 때) list.jsp 에서 하나의 게시물에 대한 상세페이지 view.jsp를 팝업으로 띄워야했다. 해당 게시물을 조회하기 위한 key값을 get 방식으로 요청하려고 했더니 특수문자가 들어가서 에러가 났다. 그래서 encodeURI 함수를 통해 URI로 인코딩된 문자열을 파라미터로 넣어주니 정상적으로 동작했다. function popup(id){ let url = "/view.do?id=" + id; let enc = encodeURI(url); window.open(enc,"팝업","width=1500,height=1200"); }
재귀함수를 이용하여 json을 계층형으로 변환하기 트리맵 라이브러리에 데이터를 계층형으로 넣어야해서 찾아본 방법이다. function fnTransferJson(arr, code) { var out = []; for (var i in arr) { if (arr[i].upprCode == upprCode) { var children = fnTransferJson(arr, arr[i].code); if (children.length) { arr[i].children = children; } out.push(arr[i]); } } return out; }
select box 플러그인 Select2 select box의 옵션 항목을 검색할 수 있는 기능을 제공하는 플러그인으로 select2를 사용해 보았다. 1. 먼저 공식 홈페이지에서 js, css 파일을 다운로드하여 직접 스크립트를 추가해 주었다. https://select2.org/ Getting Started | Select2 - The jQuery replacement for select boxes Select2 The jQuery replacement for select boxes Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used ..
table 요소를 컨트롤하는 방법들 갈무리 테이블 검색창에 키워드 입력 즉시 검색어가 포함된 행만 표출하기 $("#searchbox").keyup(function(){ var searchText = $(this).val(); $("#table > tbody > tr").hide(); var keyword = $("#table > tbody > tr > td:contains('"+ searchText +"')"); $(keyword).parent().show(); }); 테이블 요소 클릭 시 수정할 수 있도록 입력창으로 표출하기 $("#table tbody").on('click', 'td:nth-child(5)', function (e) { if($(this).children("input").length > 0) return false; var t..

티스토리툴바