使用DOM Javascript添加和刪除表行

Question

我在制作刪除按鈕時遇到問題。 盡管我設法做到了，但是在單擊（使用刪除按鈕）后，刪除了我單擊此按鈕的表行（ save_button.addEventListener("click", hahah); ）停止工作。 這是在表中添加新行的按鈕。 我單擊它，沒有任何反應。 我應該以其他方式創建刪除按鈕還是其他方式？ 我是javascript新手，非常感謝您的支持。

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值可能未反映正確的值

該行被分配了對新行的引用。 對HTMLTableRowElement的引用。 如果index為-1或等於行數，則該行將追加為最后一行。 如果index大於行數，將導致IndexSizeError異常。 如果省略index，則默認為-1。

只要做到

var row = table.insertRow( -1 ); 

確保僅在末尾插入該行 。