Question

我通过HTML创建了一个表，其中一列包含一系列按钮，用于添加新行，删除该特定行或向上或向下移动该行。我可以添加一个新行但是我在删除按钮按下的同一行时遇到了一些麻烦。我使用了一个警告方法来显示行索引，当我单击按钮时，它显示行索引未定义但如果我单击同一行中的任何其他位置，它会显示正确的行索引！

我是Javascript的新手，我想使用纯JavaScript来做这件事。

我设置一个警告来确定正在调用哪个行索引，并且出于某种原因，当我单击该按钮时，它表示行索引未定义但下一个警告框显示正确的行索引。

    function removeData(x) {
        var ind = x.rowIndex;
        alert(ind);
        //document.getElementById("table1").deleteRow(ind);
    }

   <table id="table1" border="2px">
            <tr>
                <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> 
            </tr>   
            <tr id="enterData" onclick="removeData(this)">
                <td id="buttons"><input type="button" value="Remove" id="button1" onclick="removeData(this)" /> 
                    <input type="button" value="Up" id="button2" onclick="up()" />
                    <input type="button" value="Down" id="button3" onclick="down()" /> 
                    <input type="button" value="Add" id="button4" onclick="editTable()" />
                </td>
            </tr>       
        </table>

Answer 1

您会看到两个警报，因为点击事件正在通过DOM冒泡。

您的tr和input元素都有onclick=removeData(this)个处理程序。

首先点击事件触发按钮（这就是未定义rowIndex的原因），然后它会冒泡到tr（这就是第二个警报显示正确值的原因）。

动态表和DOM

1 个答案: