使用 JavaScript 到 return 更正行号而不使用内联代码

Question

有没有一种方法可以使用 javascript 来提醒正确的行号，而无需使用 "onclick" 或 "this" 或实际上 [=29] 中的任何 javascript =] 不是 link 到 js 页面？

这是我的 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。现在我知道代码是错误的以及为什么会出错。我正在使用每个行号 returns 的 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

检查你的控制台。 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>

Answer 2

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

使用 JavaScript 到 return 更正行号而不使用内联代码

Use JavaScript to return correct row number without using inline code

html

javascript

for-loop

row-number

inline-code