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);

由于您还删除了一行，因此根据doc

，您的lastindex值可能无法反映正确的值

为行分配了对新行的引用。参考 HTMLTableRowElement。如果index是-1或等于行数，该行被追加为最后一行。如果index大于行数，将导致 IndexSizeError 异常。如果索引是省略它默认为-1。

只是做到了

var row = table.insertRow( -1 );

确保行仅在末尾插入。

使用DOM Javascript添加和删除表行

1 个答案: