如何用JavaScript弹出正确行号？不使用内联代码、onclick及this

完全符合你的要求——不需要任何内联JavaScript，只通过外部JS文件就能实现点击按钮弹出对应行号的功能。下面是具体的实现方案：

第一步：整理你的HTML结构 #

先确保你的表格每行都有对应的.row_num类元素和.confirmed按钮，完整的HTML示例如下：

<div align='center'>
  <table>
    <tr>
      <td><b>Row Number </b></td>
      <td>Confirm</td>
    </tr>
    <tr>
      <td class='row_num'>100</td>
      <td><button class='confirmed'>Confirm</button></td>
    </tr>
    <tr>
      <td class='row_num'>101</td>
      <td><button class='confirmed'>Confirm</button></td>
    </tr>
    <tr>
      <td class='row_num'>102</td>
      <td><button class='confirmed'>Confirm</button></td>
    </tr>
  </table>
</div>
<!-- 在HTML末尾引入外部JS文件 -->
<script src="script.js"></script>

第二步：编写外部JavaScript文件（script.js） #

核心思路是给所有按钮绑定点击事件，点击时通过DOM遍历找到对应行的行号：

// 获取所有确认按钮
const confirmButtons = document.querySelectorAll('.confirmed');

// 遍历每个按钮，添加点击事件监听
confirmButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    // 找到当前按钮所在的表格行
    const currentRow = event.currentTarget.closest('tr');
    // 获取该行的行号元素
    const rowNumElement = currentRow.querySelector('.row_num');
    // 弹出行号内容
    alert(`行号：${rowNumElement.textContent.trim()}`);
  });
});

关键逻辑说明： #

• event.currentTarget：指向当前绑定事件的按钮元素，完美替代了this的作用，符合你的要求
• closest('tr')：向上遍历DOM树，找到最近的<tr>元素，确保能精准定位到按钮所在的行
• querySelector('.row_num')：在当前行内找到带有.row_num类的元素，获取它的文本内容

这样点击任意一个Confirm按钮，就会弹出对应行的行号啦！

内容的提问来源于stack exchange，提问作者M.Stevens