javascript - 获取用于 actionEvent 处理的父 div 的最简单方法？

Question

我正在制作一个按钮二维矩阵，格式如下:

<table id="board">
        <tr class="row 0">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 1">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 2">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
</table>

我想在用户点击按钮时实现一个功能。我的想法是从按下的按钮中获取行和列，但我不确定该怎么做。在我的 js 脚本中，我想做类似的事情:

document.querySelector('button').onclick = move("insert button row", "insert button column");

我想知道如何找到父 div 或能够完成此任务的东西。

Answer 1

您需要遍历所有按钮。并且您必须为 onclick 分配一个函数，而不是调用该函数。在该函数内部，您可以使用 this 来引用被单击的按钮，使用 parentElement 来获取包含元素，以及使用 rowIndex 和 cellIndex 获取它们在表中的位置。

document.querySelectorAll('button').forEach(function(b) {
    b.addEventListener('click', function() {
        var col = this.parentElement.cellIndex;
        var row = this.parentElement.parentElement.rowIndex;
        move(row, col);
    });
});