반응형
인원수가증가하거나
입력값이 불특정하게 증감할수있을시
추가삭제버튼으로 배열로 넘기기도한다
상당히 귀찮은 작업이고 db도 배열로 넣고해야되서 귀찮..
일단은 javascript 로 클론처리해서 넣는데
가끔 클릭작동이나 배열안넘어갈때 동적 컨텐츠? 그 체크도 해주고 삭제할때도 인덱스 체크도해주고..
여튼 스크립트는 이런식이다
parent로 상위 골라서 마지막 부분에추가. 삭제버튼활성화
맨처음은 삭제버튼 비활성화
추가버튼은 맨첫번째에만 넣어뒀다 아래로 차곡차곡 추가되는방식
// 항목추가 버튼 클릭시
$(".add_btn").click(function(){
var clickedRow = $(this).parent();
var cls = clickedRow.attr("class");
// tr 복사해서 마지막에 추가
var newrow = clickedRow.clone();
newrow.find("li:eq(0)").remove();
newrow.find('input').val('');
newrow.find('.del_btn').removeClass('d-none');
newrow.find('.add_btn').addClass('d-none');
newrow.insertAfter($(".ap_con ."+cls+":last"));
});
// 삭제버튼 클릭시
$(document).on('click','.del_btn',function(){
var clickedRow = $(this).parent();
var cls = clickedRow.attr("class");
// 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다.
if( clickedRow.find("li:eq(0)").attr("rowspan") ){
return false;
}
clickedRow.remove();
resizeRowspan(cls);
});
728x90
반응형
'프로그래밍 > javascript' 카테고리의 다른 글
그누보드 javascript 시간 시분초로 나눠서 구하기 (0) | 2020.11.26 |
---|---|
그누보드 리스트 체크박스 전체체크관련 (0) | 2020.09.16 |
탭 클릭시 콘텐츠 박스 나오게 (0) | 2020.07.22 |
datepicker 간단 적용 (0) | 2020.07.15 |
input 배열의 모든값 합 구하기 (0) | 2020.07.10 |