DOM 자바 스크립트를 사용하여 표 행 추가 및 제거

Question

삭제 버튼을 만드는 데 문제가 있습니다. 비록 내가 어떻게 든 그것을 만들었지 만,이 버튼 (save_button.addEventListener("click", hahah);)을 클릭하는 테이블 행을 제거하는 클릭 (삭제 버튼 사용)은 작동을 멈춘다. 그것이 테이블에 새로운 행을 추가하는 버튼입니다. 나는 그것을 클릭하고 아무 일도 일어나지 않는다. 삭제 버튼을 다른 방법으로 만들어야합니까? 아니면 다른 것입니까? 나는 자바 스크립트에서 새롭기 때문에 나는 당신의 지원에 정말로 감사 할 것입니다.

var lastindex = 1; 

var save_button = document.getElementById("contacts-op-save"); 

save_button.addEventListener("click", hahah); 

function hahah(event) 
{ 
    var x1 = document.getElementById("first_n").value; 
    var x2 = document.getElementById("last_n").value; 
    var x3 = document.getElementById("e_mail").value; 


    event.preventDefault(); 

    var table = document.getElementById("contacts-table"); 

    var row = table.insertRow(lastindex); 

    lastindex++; 

    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    var cell4 = row.insertCell(3); 
    var cell5 = row.insertCell(4); 


    cell1.innerHTML = lastindex-1; 
    cell2.innerHTML = x1; 
    cell3.innerHTML = x2; 
    cell4.innerHTML = x3; 
    cell5.innerHTML = 
    "<input id='edit-"+ (lastindex-1) +"' value='Edit' type='button'/>" + 
    "<input id='delete-"+ (lastindex-1) +"' value='Delete' onclick = 
    'deleteRow(this)' type='button'/>" + 
    "<input id='save-"+ (lastindex-1) +"' value='Save' type='button'/>";   

    var saveBtn = document.getElementById("save-"+ (lastindex-1)); 
    saveBtn.style.display = "none"; 

    var editBtn = document.getElementById("edit-"+ (lastindex-1)); 

    var deleteBtn = document.getElementById("delete-"+ (lastindex-1)); 



    editBtn.addEventListener("click", function(){ 
     saveBtn.style.display = "inline"; 
     editBtn.style.display = "none"; 
     document.getElementById("delete-" + (lastindex-1)).style.display = 
    "none"; 
     var inputFirstName = document.createElement("input"); 
     inputFirstName.type = "text"; 
     inputFirstName.id = "first_name-" + (lastindex-1); 
     inputFirstName.value = x1; 
     cell2.innerText = ""; 
     cell2.appendChild(inputFirstName); 

     var inputLastName = document.createElement("input"); 
     inputLastName.type = "text"; 
     inputLastName.id = "last_name-" + (lastindex-1); 
     inputLastName.value = x2; 
     cell3.innerText = ""; 
     cell3.appendChild(inputLastName); 

     var inputEmail = document.createElement("input"); 
     inputEmail.type = "text"; 
     inputEmail.id = "email-" + (lastindex-1); 
     inputEmail.value = x3; 
     cell4.innerText = ""; 
     cell4.appendChild(inputEmail); 



}); 
saveBtn.addEventListener("click", function() 
{ 
    saveBtn.style.display = "none"; 
    deleteBtn.style.display = "inline"; 
    editBtn.style.display = "inline"; 
    var first_name = document.getElementById("first_name-" + (lastindex- 
    1)).value; 
    var last_name = document.getElementById("last_name-" + (lastindex- 
    1)).value; 
    var edited_email = document.getElementById("email-" + (lastindex- 
    1)).value; 

    cell1.innerHTML = lastindex-1; 
    cell2.innerHTML = first_name; 
    cell3.innerHTML = last_name; 
    cell4.innerHTML = edited_email; 

    }) 

} 

    function deleteRow(row) 
    { 
    var d = row.parentNode.parentNode.rowIndex; 
    document.getElementById('contacts-table').deleteRow(d); 
    } 

Answer 1

나는 문제가

var row = table.insertRow(lastindex); 

당신은 또한 행을 제거하기 때문에, 사용자는 lastIndex 값이 올바른 값을 반영하지 않을 수이 라인에 용의자 이후로 doc

당 행에 새 행에 대한 참조가 지정됩니다. HTMLTableRowElement에 대한 참조입니다. index가 -1 또는 행 수인 경우 행이 마지막 행으로 추가됩니다. 인덱스가 행 수보다 크면 IndexSizeError 예외가 발생합니다. 인덱스가 이면 생략됩니다. 기본값은 -1입니다.

그냥

var row = table.insertRow(-1); 

행이 마지막에만에 삽입되어 있는지 확인 할 수 있습니다.