[JavaScript] 테이블 로우 추가/삭제(숨김)에 따른 넘버처리

function fn_addRow(){
   var innerHtml = “”;
   innerHtml += ~~~~~
   innerHtml += ~~~~~
 
   $(‘.table’)append(innerHtml);
 
   fn_updateRowNo();
}
 
function fn_deleteRow(){
    $(‘.table tbody tr’).each(function(){
       var checkbox = $(this).find(‘input[type=“checkbox”]’);
          if(checkbox.prop(‘checked’)){
             $(this).hide();
          }
  });
     fn_updateRowNo();
} 
 
 
function fn_updateRowNo(){
    var indexNo = 1;
    
    $(‘table tbody tr’).each(function(){
       if($(this).is(‘:visible’)){
          $(this).find(‘#rowNo’).val(rowIndex);
          rowIndex++;
       }
    });
}
  
  

$(this).remove(); 일때는, 아래처럼 넘버 설정이 가능했는데, hide해야해서 위처럼 수정!@

function fn_updateRowNo(){
   $(‘table tbody tr’).each(function(index){
      $(this).find(‘#rowNo’).val(index+1);
   });
}

---

☑️ 테이블 행 추가/삭제 시, 아래와 같이 insertRow(), insertCell(), deleteRow() 함수 사용 가능

function addRow(){
   var table = document.getElementById(‘table’);
   var newRow = table.insertRow();
   
   var cell1 = newRow.insertCell();
   var cell2 = newRow.insertCell();
   var cell3 = newRow.insertCell();
   
   cell1.innerHTML = ‘<input type=“checkbox”>’;
   cell1.className = ‘table-cell’;
   
   cell1.innerHTML = ‘<input type=“text”>’;
   cell1.className = ‘table-cell’;
   
   cell1.innerHTML = ‘<input type=“test”>’;
   cell1.className = ‘table-cell’;
}


function deleteRow() {
   var table = document.getElementByID(‘table’);
   
   for(var i=1; i<table.row.length; i++){
      if(check){
         table.deleteRow(i);
         i—-; // 삭제 후, 인덱스를 감소시켜 다음 행을 건너뛰지 않도록 처리
      }
   }
}

---

참고 및 출처 :
https://baessi.tistory.com/m/109

[jQuery] 테이블 tr 동적 추가 삭제하기

https://hianna.tistory.com/443

[Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭)