개발노예 코드와 일상

자바스크립트 메모

ajax로 구해온 정보를 다시 페이지에 삽입하려고할때

위치를 정해서 집어넣으면 편한데

이게 갯수가 변동할수있다거나

줄이 바뀌는,

이번경우에는 품목을 추가 삭제할수있는 변동성이 있는 구조여서

거기다 맨 하단에는 합계를 넣어줘야했기에

맨하단 윗칸에 넣어야했다

뭐 테이블구조로 작업을 해둬서 약간 애매하긴했는데

그래도 원래 명령어가 다 있어서

수월하게 풀렸다

 - after()

 지정한 요소 뒤에 새로운 요소를 삽입 

 A.after(B) - A 뒤에 B를 추가

 - insertAfter()

 지정한 요소 뒤에 새로운 요소를 삽입

 A.insertAfter(B - B 뒤에 A 를 추가

 - before()

 지정한 요소 시작 부분에 내용을 삽입 

 A.berfore(B) - A 앞에 B를 추가

 - insertBefore()

 지정한 요소 시작 부분에 내용을 삽입

 A.insertBefore(B) - B 앞에 A 를 추가

인원수가증가하거나
입력값이 불특정하게 증감할수있을시
추가삭제버튼으로 배열로 넘기기도한다
상당히 귀찮은 작업이고 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);

});