0부터
본문
카운트는 1부터
배열은 0부터 시작하는데...
동적추가를 적용하는데
var renumber = 0;
삭제에 따라
html += "<td id='itemNum'>" + renumber + "</td>";
이건 숫자가 재배열되는데
html += "<td><input type='text' name='extra_img_url[]' id=img_url"+(renumber-1)+" ></td>";
이건 왜 안될까요?
중간에 id가 이빨빠진게 된다는 겁니다.
어떻게 해야 하는지...
삭제부분은
html += "<td><button type='button' id='remove_button' class='btn_b03' onclick='removeItem(this);'> X </button></td>";
입니다
function addItem() {
renumber++;
var html = "<tr>";
html += "<td id='itemNum'>" + renumber + "</td>";
html += "<td><input type='text' name='item[]'></td>";
html += "<td><input type='text' name='extra_img_url[]' id=img_url"+(renumber-1)+" ></td>";
// updated and sanitized the logic to delete the row
function removeItem(elem) {
if (window.confirm("정말로 삭제하시겠습니까?")) {
let rowToDelete = elem.parentElement.parentElement;
let rowNumber = rowToDelete.getElementsByTagName('td')[0].innerText;
document.getElementById("addItems").deleteRow(rowNumber - 1);
let tblRows = document.getElementById('addItems').getElementsByTagName('tr');
let j = 0;
for (; j < tblRows.length; j++) {
tblRows[j].getElementsByTagName('td')[0].innerText = j + 1
}
calculateDueAmount(); // calculate due amount since row got deleted.
renumber = j;
}
}
답변 1
삭제 후 재배열을 해주셔야 합니다.
간단하게 reordering() 재배열 함수를 만들어서
renumber = j; 밑에 함수를 호출해주시면 됩니다.
// updated and sanitized the logic to delete the row
function removeItem(elem) {
if (window.confirm("정말로 삭제하시겠습니까?")) {
let rowToDelete = elem.parentElement.parentElement;
let rowNumber = rowToDelete.getElementsByTagName('td')[0].innerText;
document.getElementById("addItems").deleteRow(rowNumber - 1);
let tblRows = document.getElementById('addItems').getElementsByTagName('tr');
let j = 0;
for (; j < tblRows.length; j++) {
tblRows[j].getElementsByTagName('td')[0].innerText = j + 1
}
calculateDueAmount(); // calculate due amount since row got deleted.
renumber = j;
reordering();
}
}
function reordering()
{
var elements = document.getElementsByName('extra_img_url[]');
for( var i = 0 ; i < elements.length; i++ )
{
elements[i].setAttribute("id","img_url"+ ( i + 1 ) );
}
}