使用 Javascript 从表中删除行答案

【问题标题】：Deleting Rows From A Table Using Javascript使用 Javascript 从表中删除行
【发布时间】：2015-11-30 20:08:53
【问题描述】：

我的 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 函数有什么建议吗？

【问题讨论】：

为什么要尝试..catch？似乎没有必要。行有一个 rowIndex。此外，如果您有对该行的引用，那么 row.parentNode.removeChild(row) 会在没有循环的情况下完成这项工作。对deleteButton.onclick 的赋值是调用 deleteRow 的结果（即未定义），而不是函数本身。

标签： javascript

【解决方案1】：

newRow 在您调用时未定义

deleteButton.onclick = deleteRow(newTable, newRow);

确实应该如此

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

【讨论】：

【解决方案2】：

您的删除按钮超出范围，因此代码永远不会被调用。尝试移动线路

deleteButton.onclick = deleteRow(newTable, newRow);

到 buildTable 函数内部，在 for 循环内部。在 deleteRow 函数的顶部添加一个 console.write("Hello") 以确保它被调用。

【讨论】：