单击 HTML 表格并获取行号（使用 Javascript，而不是 jQuery）

Posted 2023-03-05

【中文标题】单击 HTML 表格并获取行号（使用 Javascript，而不是 jQuery）

【英文标题】：Click on HTML table and get row number (with Javascript, not jQuery)

【发布时间】：2015-05-16 12:28:42

【问题描述】：

我想知道如何单击 html 表格中的按钮并获取返回给我的行号和列号：例如，使用下表：

<table>
  <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
  </table>

如何使用 javascript 点击第二行的第一个按钮并让它告诉我点击了第二行的第一个单元格？每个按钮是否需要有唯一的 id？

【问题讨论】：

行有rowIndex。并且单元格有cellIndex。你可以使用它们like so ...

【参考方案1】：

试试这个代码： alert(document.getElementById("yourTableId").childNodes[1].childElementCount);

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案2】：

@Gremash js 函数的最通用版本

function  getId(element) 
    alert("row" + element.closest('tr').rowIndex + 
    " -column" + element.closest('td').cellIndex);

【参考方案3】：

试试这个：

function  getId(element) 
    alert("row" + element.parentNode.parentNode.rowIndex + 
    " - column" + element.parentNode.cellIndex);

<table>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
</table>

【讨论】：

您可以轻松地将其添加到 TD

并删除 parentNode 函数之一以不使用按钮。

我尝试“element.parentNode.parentNode.rowIndex”，但它返回未定义

超人......我得到了很多jQuery的解决方案。我想要在 Javascript 中。明白了.....