使用 JavaScript 返回正确的行号而不使用内联代码

Question

有没有一种方法可以使用 javascript 来提醒正确的行号，而不使用“onclick”或“this”，或者实际上 HTML 中除了指向 js 页面的链接之外的任何 javascript？

这是我的 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>

        <tr>
            <td class='row_num'>103</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>104</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>
    </table>
</div>

<script type="text/javascript"src="js/test.js"></script>

这是javascript。现在我知道代码是错误的以及为什么它是错误的。我正在使用一个返回每个行号的 for 循环。所以我插入了一个中断，但这只是在第一行编号处中断，并在每个按钮上警告 100。所以我需要知道的是是否可以在不使用 HTML 页面中的任何内联 JavaScript 代码的情况下提醒正确的行号。

window.onload = addListener();

function buttonClick(){

var x = confirm("Are you sure you want to delete?");

var rowNum = document.getElementsByClassName("row_num");

if (x)
var y;
for (y = 0; y < rowNum.length; y++) {
var nums = rowNum[y].innerText;
    alert(nums + " Has been deleted");
        break;
}
else
return false;
}

function addListener() {
var i;
var z = document.getElementsByClassName("confirmed");
for (i = 0; i < z.length; ++i){
z[i].addEventListener("click", buttonClick);

}
}

Answer 1

您最好将 eventListener 附加到整个表，然后对事件使用“目标”属性进行操作。通过这种方式，您可以访问表格中的特定元素并提取其 html（或 innerText），以指示此场景中的行号。

Answer 2

检查您的控制台。 for 之后的 else 语法无效。

尝试使用.textContent（标准属性名称）而不是.innerText，这是IE 引入的旧的和非标准的东西。

虽然我建议您使用数组函数而不是 for 循环，但您的方法是正确的，尤其是因为您使用的 var 存在提升问题。

window.onload = addListener();

function buttonClick(e) {
  if (!confirm("Are you sure you want to delete?")) return;
  const tr = e.target.closest('tr');
  const rowNum = tr.children[0].textContent;
  alert(rowNum + " Has been deleted");
}

function addListener() {
  document.querySelectorAll('.confirmed').forEach(element => {
    element.addEventListener("click", buttonClick);
  });
}

<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>

        <tr>
            <td class='row_num'>103</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>104</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>
    </table>
</div>