javascript - JavaScript：动态删除行操作错误

Question

我正在尝试以下代码；

为什么deleteRow() 当我们第一次单击删除按钮（也不是删除行）时没有提醒“嗨”？令人惊讶的是，它会在第二次完美运行。

HTML

<div style="height: 190px;overflow: auto;left:220px;width:710px;" id="filterTable">
            <table id="filterTableBody" style="border-collapse: collapse; border: 1px solid black;width:690px;" border="1">
                <tbody><tr bgcolor="#FF6600">
            <td><strong>
                    and/or&nbsp;&nbsp;&nbsp;
                </strong></td>
                <td><strong>
                    Column Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </strong></td>
                <td><strong>
                    operator&nbsp;&nbsp;&nbsp;
                </strong></td>
                <td><strong>
                    Filter&nbsp;&nbsp;&nbsp;
                </strong></td>

                <td><strong>
                    Delete&nbsp;&nbsp;&nbsp;
                </strong></td>
            </tr>
            <tr><td>&nbsp;</td><td>WORKGROUP_NAME</td><td>!=</td><td>ABDEL HAMEID</td><td><a href="javascript:deleteRow()"><img src="/images/delete.gif"></a></td></tr></tbody></table>
            </div>

Javascript

 function deleteRow(){
        var table = document.getElementById('filterTableBody');
        var rows1 = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
        for (var i = 0; i < rows1.length; i++) {
            rows1[i].onclick = (function() {
            alert("hi");
                table.deleteRow(this.rowIndex);
                var oTable = document.getElementById('filterTableBody');

            //gets rows of table
            var rowLength = oTable.rows.length;
            for (i = 1; i < rowLength; i++){

                   var oCells = oTable.rows.item(i).cells;
                   //gets cells of current row
                   var cellLength = oCells.length-1;
                       for(var j = 0; j < cellLength; j++){
                           oCells.item(j).innerHTML = "";
                           break;
                       }
                       break;
            }
        });
    }

} 

为什么代码在第一次点击时不运行，为什么在第二次点击时运行？

Answer 1

原因是onclick行的事件处理程序仅在第一次单击“删除”按钮时才附加。

它们必须附加 onload 本身。你可以这样做：

window.onload = deleteRow;

演示小提琴

Answer 2

这段代码对我有用。感谢@harry 指出问题。

function deleteRowUI(btndel) {
            var table=document.getElementById('filterTableBody');
            if (typeof(btndel) == "object") {
                p=btndel.parentNode.parentNode;
                p.parentNode.removeChild(p);
                var oTable = document.getElementById('filterTableBody');

                //gets rows of table
                var rowLength = oTable.rows.length;
                for (var i = 1; i < rowLength; i++){

                       var oCells = oTable.rows.item(i).cells;
                   //gets cells of current row
                   var cellLength = oCells.length-1;
                       for(var j = 0; j < cellLength; j++){
                           oCells.item(j).innerHTML = "";
                           break;
                       }
                       break;
            }
        } else {
            return false;
        }
    }