javascript - 如何在 javascript 中找到我刚刚单击的行

Question

我找不到适合我问题的答案。我的表格中有行，每一行都包含一个按钮。如何查找我刚刚单击的按钮的行索引。

<tr>
    <td>111</td>
    <td>aaa</td>
    <td><input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" /></td>
  </tr>
  <tr>
    <td>222</td>
    <td>bbb</td>
    <td><input type="submit" name="sec" id="second" value="Second" onclick="countRow(this.id)" /></td>
  </tr>
  <tr>
    <td>333</td>
    <td>ccc</td>
    <td><input type="submit" name="third" id="third" value="Third" onclick="countRow(this.id)" /></td>
  </tr>

Answer 1

使用 tbody 标签和此 javascript

function countRow(id) {
  var table = document.getElementById('dataTable')
  var tbody = table.getElementsByTagName('tbody')[0]
  var rows = tbody.getElementsByTagName('tr');
  for (i = 0; i < rows.length; i++) {
    rows[i].onclick = function() {
      alert(this.rowIndex + 1);
    }
  }
}

<table id="dataTable">
  <tbody>
    <tr>
      <td>111</td>
      <td>aaa</td>
      <td>
        <input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" />
      </td>
    </tr>
    <tr>
      <td>222</td>
      <td>bbb</td>
      <td>
        <input type="submit" name="sec" id="second" value="Second" onclick="countRow(this.id)" />
      </td>
    </tr>
    <tr>
      <td>333</td>
      <td>ccc</td>
      <td>
        <input type="submit" name="third" id="third" value="Third" onclick="countRow(this.id)" />
      </td>
    </tr>
  </tbody>
</table>