on
[JAVASCRIPT] 동적으로 테이블 행 추가/삭제 후 번호 다시 매기기
[JAVASCRIPT] 동적으로 테이블 행 추가/삭제 후 번호 다시 매기기
동적으로 행 추가/삭제하기 완결판!
-추가 버튼을 누를 시 행이 밑에서부터 하나씩 추가된다.
-각 행의 - 버튼을 누를 시 해당 행이 삭제된다.
-초기에는 DB에 가져온 값을 각 행에 보여주고, 사용자가 추가/삭제 할 수 있도록 한다.
-적용 버튼을 누를 시 해당 값이 DB에 저장된다.
1. DB에서 값 불러오기
-행을 추가 할 테이블 세팅한다.
-부트스트랩을 이용할거라면 당연히 추가해줘야 한다.
동적테이블 행추가하기 추가버튼 행
-반복문을 이용해서 초기에는 DB에서 불러온 값을 세팅하도록 한다.
행 ${status.count}
-추가/변경된 부분만 보자면,
행 ${status.count}
-구문을 사용하려면 Collection객체인 List/배열을 items에 적어준 뒤 사용할 변수 명을 var에 적어준다.
-input box의 value를 var에 적어둔 변수명을 입력하여 Collection 객체 값을 하나씩 표출하게 한다.
-번호를 붙여야 하므로, varStatus에 지정해둔 "status"를 사용하여 count 해준다. ${status.count}
2. 추가하기 버튼 이벤트 작성
-버튼을 클릭했을 때 추가 할 태그를 템플릿에 세팅한다.
-를 로 지정한 이유는 초기에는 템플릿이 나오지 않게 하기 위함이다.
-이벤트를 통해 은 로, 는 로 바꿔주게 되면 행이 추가되는 것처럼 보이게 된다.
행${status.count}
-추가하기 버튼에 onclick을 달아준다.
추가버튼
-onclick 함수 작성한다.
function replaceAll(str, ostr, rstr) { if(str == undefined) return str; return str.split(ostr).join(rstr); } function addItem() { var append_tr = $("#additem_templete").html(); append_tr = replaceAll(append_tr, 'ttr', 'tr'); append_tr = replaceAll(append_tr, 'ttd', 'td'); $("#table_ipaddr tbody").append(append_tr); }
3.삭제하기 버튼 이벤트 작성
-삭제 버튼에 삭제 이벤트 onclick을 달아준다. 물론 추가하기 버튼을 통해 추가 될 button에도 동일하게 세팅해놔야 함
-삭제 함수 작성한다. this를 통해 넘어온 obj에서 가장 가까운 객체를 찾아 삭제한다.
function deleteItem(obj) { var tr = $(obj).closest("tr"); tr.remove(); }
4.항목 추가/ 삭제시마다 행 순서 다시 매기기
-반복문을 통해 DB에서 가져온 값은 1, 2, 3으로 배열의 길이만큼 잘 늘어나지만,
-추가하기 버튼으로 새로운 템플릿을 추가하거나, 중간의 행을 삭제 시에는 행의 순서가 꼬이게 된다.
-이를 방지하게 위해 각 버튼마다 onclick 이벤트를 한개씩 더 작성해놓는다.
-한 개의 태그에 onclick 이벤트를 두 개 달때는, 단순하게 event1(); event2(); 식으로 연결하면 된다.
추가버튼
-행 번호 다시 매기기 함수를 작성한다.
-테이블 내에 현재 생성된 row 길이만큼 반복문을 돈다(화면에 보이는 input box 개수를 센다)
-각 행의 0번째 행을 바꿔치기 해준다.
function labelIps() { for(var i = 0; i"; } }
-전체 HTML코드 정리
동적테이블 행추가하기 추가버튼 행 ${status.count} 행${status.count}
-입력된 값을 DB에 다시 저장하려면, 입력된 input box가 공백이 아닌 경우로 조건을 작성하여
반복문 돌며 input.value를 새로운 배열에 담아준다.
var len = $('#table_ipaddr >tbody tr').length; var ipData_filled = new Array(); for(var i=0; i
from http://yenbook.tistory.com/65 by ccl(A) rewrite - 2021-10-08 15:01:28