Question

我正在尝试制作战舰游戏，该表由10行10列按钮组成，每个按钮没有唯一的ID

<table id="myTable">
      <tr >
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
      </tr>
      <tr >
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
        <td><button type="button"></button></td>
      </tr>
    <!-- it's quite longer-->
</table>

在单击任何按钮时获取单元格的坐标，我这样做但我返回

table.addEventListener("click",function(){
    let col=this.closest('td').index();
    let row=col.closest('tr').index();
    shot([row,col]);
});

但是控制台会为此关键字引发typeError

未捕获的TypeError：无法读取null的属性“ index”

Answer 1

好像您正在使用jquery。（js中没有索引方法）尝试使用目标事件

table.addEventListener("click",function(event){
    let col= $(event.target).closest('td').index();
    let row= $(event.target).closest('tr').index();
    shot([row,col]);
});

还需要检查目标事件是您需要的td还是tr

Answer 2

首先，我认为您误解了closest方法。 closest返回最接近的祖先，而不是子元素，它是相对于html层次结构而不是鼠标位置（mdn）。

第二，最简单的方法是将事件侦听器添加到单个单元格：

[...table.querySelectorAll('tr')].forEach((row, rowI) =>
    [...row.querySelectorAll('td')].forEach((cell, colI) =>
        cell.addEventListener("click", () => shot([rowI, colI]))));

Answer 3

您可以使用表<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".Fragments.SearchFragment"> <com.google.android.material.textfield.TextInputLayout android:id="@+id/searchTextInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="8dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/searchTextInputEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginEnd="8dp" android:paddingStart="24dp" android:paddingEnd="24dp" android:background="#ffffff" android:elevation="20dp" android:drawableStart="@drawable/ic_menu_black_24dp" android:hint="Search" /> </com.google.android.material.textfield.TextInputLayout> </androidx.constraintlayout.widget.ConstraintLayout> 和id获得所有按钮。要获取tr＆td然后最先使用querySelectorAll和cellIndex

的ise

rowIndex

document.getElementById('myTable').querySelectorAll('button').forEach((item) => {
  item.addEventListener('click', function(e) {
    let td = item.closest('td').cellIndex ;
    let tr = item.closest('tr').rowIndex;
    console.log(tr, td)
  })
})

Answer 4

如果仅使用DOM API，则必须自己计算索引。

    document.querySelector('#myTable').addEventListener("click", function (e) {
        let tr = e.target.closest('tr');
        let td = e.target.closest('td');
        let col = Array.from(tr.children).indexOf(td);
        let row = Array.from(this.rows).indexOf(tr);
        alert([row, col]);
    });

Answer 5

如何为每个按钮都没有唯一ID的按钮表设置EventListener？

5 个答案: