使用Java腳本從表中刪除行

Question

我在使用Javascript表時遇到麻煩，並根據創建的按鈕刪除了特定的行。 我使用的是先前分配中使用的一些邏輯，以一種顏色將單元格標記為刪除行。 我不知道通過onclick調用deleteRow函數的正確方法是什么。 這是我的代碼：

var collection = [ 

    {Header1:"1, 1" , Header2: "2, 1" , Header3:"3, 1", Header4: "4, 1"},
    {Header1:"1, 2" , Header2: "2, 2", Header3:"3, 2", Header4: "4, 2" },
    {Header1:"1, 3" , Header2: "2, 3" , Header3:"3, 3", Header4: "4, 3" }

];


function buildTable(array){

    var newTable = document.createElement("table");

    var properties = Object.keys(array[0]);
    console.log(properties);

    var firstRow = document.createElement("thead");

    var newRow;
    var newData;
    var newHeader;
    var button;
    var deleteButton;
    var editButton;

    for(var i = 0; i < properties.length; i++)
    {

        newHeader = document.createElement("th");
        newHeader.textContent = "Header" + " " + [i + 1];

        firstRow.appendChild(newHeader);
    }

    newTable.appendChild(firstRow);

    for(var j = 0; j < array.length; j++)
    {
        newRow = document.createElement("tr");
        for(var k = 0; k < properties.length; k++)
        {
            newData = document.createElement("td");
            var propName = properties[k];
            newData.textContent = array[j][propName];
            newRow.appendChild(newData);

        }

        deleteButton = document.createElement("BUTTON");        
        var deleteText = document.createTextNode("DELETE");
        editButton = document.createElement("BUTTON");
        var editText = document.createTextNode("EDIT");
        deleteButton.appendChild(deleteText);                                
        newRow.appendChild(deleteButton);
        editButton.appendChild(editText);                                
        newRow.appendChild(editButton);

        newTable.appendChild(newRow);

    }

return newTable; 
}

var newTable = document.body.appendChild(buildTable(collection));


function deleteRow(tableID, currentRow){


    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for (var i = 0; i < rowCount; i++) {
            var row = table.rows[i];

            if (row==currentRow.parentNode.parentNode) {
                if (rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
    } catch (e) {
        alert(e);
    }


}

deleteButton.onclick = deleteRow(newTable, newRow);

當我單擊刪除按鈕時，沒有任何反應。 關於如何使用onclick命令正確調用deleteRow函數的任何建議？

Answer 1

在調用時未定義newRow

deleteButton.onclick = deleteRow(newTable, newRow);

它應該是

deleteButton.addEventListener('click', function(){ deleteRow(newTable, newRow); }, false);

Answer 2

您的刪除按鈕不在范圍內，因此永遠不會調用該代碼。 嘗試移動線

deleteButton.onclick = deleteRow(newTable, newRow);

在buildTable函數內部，for循環內部。 在deleteRow函數的頂部添加console.write（“ Hello”），以確保它被調用。