我按以下格式制作按钮2d矩阵:
< table id =“board”> < tr class =“row 0”> < td class =“col 0”>< button>< / button>< td> < td …
这是一种方法:
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>
使用的好处 closest() 您是否不必担心将来更改标记。我也建议使用 addEventListener() 代替 onclick 因为你可能无意中覆盖了另一个点击事件 onclick 因为它在全球范围内(见 为什么在HTML中使用onClick()是一种不好的做法? )。
closest()
addEventListener()
onclick
注意: closest() 需要IE 11中的polyfill( - https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill )
您可以尝试将事件侦听器添加到tr元素,然后访问target和currentTarget的父级
for (var trEL of document.querySelectorAll('tr')) { trEl.addEventListener('click', event => { if (event.target.tagName === 'button') { move(event.target.parentNode, event.currentTarget) } }); }
jQuery方式(需要在页面上插入JS lib):
$('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; //Retieves the TR tag of the button move("insert button row", "insert button column"); });
你需要遍历所有按钮。你必须分配一个功能 onclick ,而不是调用函数。在该功能内,您可以使用 this 引用被点击的按钮, parentElement 获取包含元素,和 rowIndex 和 cellIndex 获得他们在桌子上的位置。
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); }); });
您可以使用 parentNode 获取特定元素的父元素。
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}`); } });