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

您可以使用parentNode来获取特定元素的父元素。

请参见下面的示例。

document.querySelectorAll('button').forEach(function (e) {
  e.onclick = function () {
    console.log(`This is ${e.nodeName}`);
    console.log(`My dad is ${e.parentNode.nodeName}`);
    console.log(`My grandpa is ${e.parentNode.parentNode.nodeName}`);
  }
});

<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>
  </tr>
</table>

Answer 2

您需要遍历所有按钮。并且您必须将一个功能分配给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);
    });
});

Answer 3

jQuery方式（需要在页面上插入JS库）

$('button').on('click', () => {
    this.parentNode.parentNode; //Retrieves TR tag of the individual button
    move("insert button row", "insert button column");
});

非jQuery方式：

document.querySelectorAll('button').forEach((e) => {
    console.dir(e); //Reads out of all properties and methods of element in console
  //Inserts click event listener logic if you please
  e.parentNode.parentNode; //Retrieves the TR tag of the button
    move("insert button row", "insert button column");
});

Answer 4

您可以尝试将事件侦听器添加到tr元素，然后访问目标和currentTarget的父级

for (var trEL of document.querySelectorAll('tr')) {
  trEl.addEventListener('click', event => {
  if (event.target.tagName === 'button') {
    move(event.target.parentNode, event.currentTarget)
  }
 });
}

Answer 5

下面是您可以采用的一种方法。

使用closest()的好处是您不必担心将来更改标记。我还建议您使用addEventListener()而不是onclick，因为您可能会无意中用onclick覆盖另一个点击事件，因为它在全局范围内（请参见Why is using onClick() in HTML a bad practice?）。

注意：closest()需要在IE 11-（https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill）中进行填充

const buttons = document.querySelectorAll("button");

buttons.forEach(el => {
  el.addEventListener("click", evt => {
    let button = evt.target;
    console.log({
      row: button.closest("tr").classList[1],
      columns: button.closest("td").classList[1]
    });
  });
});

button {
  display: block;
  height: 20px;
  width: 20px;
}

button:hover,
button:focus,
button:active {
  background-color: blue;
  cursor: pointer;
}

<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>
  </tr>
</table>

获取父div进行actionEvent处理的最简单方法？

5 个答案: