javascript - 给我的表的每一行添加onclick函数只记录最后一行
问题描述
table我的文件上有一个html，它有 3 个rows。我试图onclick在窗口中动态地将方法添加到每一行。onload 将返回我通过警报单击的行索引，但我单击的位置无关紧要，它总是返回，就好像我会单击最后一行一样。
下面是我<script></script>在<head>标签顶部的 windows.onload：
window.onload = () => {
var table = document.getElementById("myTableTesting");
var rows = table.getElementsByTagName("tr");
for (let i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
console.log('currentRow', currentRow); // < --- HERE IS SHOWING THE CORRECT ROW.
currentRow.onclick = () => onClickRowTable(currentRow.rowIndex);
}
}
function onClickRowTable(index) {
alert(index);
console.log('onClickRowTable', index);
}
这是我的桌子：
<table id="myTableTesting" class="table table-bordered table-hover">
<thead class="thead-dark" style="text-align: center">
<tr>
<th>
Nº
</th>
<th>
Gerencia
</th>
<th>
DNI
</th>
<th>
Permiso
</th>
<th>
EO
</th>
</tr>
</thead>
<tbody style="text-align: center">
<tr>
<td>
0
</td>
<td>
2134
</td>
<td>
54147890G
</td>
<td>
VE
</td>
<td>
OAFNIE
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2534
</td>
<td>
54145820C
</td>
<td>
INVB
</td>
<td>
OAFHIE
</td>
</tr>
</tbody>
</table>
如果你能找到任何线索，我把我的 HTML 放在这里
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Test</title>
<script>
window.onload = () => {
var table = document.getElementById("myTableTesting");
var rows = table.getElementsByTagName("tr");
for (let i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
console.log('currentRow', currentRow);
currentRow.onclick = () => onClickRowTable(currentRow.rowIndex);
}
}
function addNewRow() {
let gerencia = document.getElementById("inputGerencia").value;
let dni = document.getElementById("inputDNI").value;
let permiso = document.getElementById("inputPermiso").value;
let eo = document.getElementById("inputEO").value;
let numero = -1;
let table = document.getElementById("myTableTesting");
var row = table.insertRow(-1);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
row.onclick = () => onClickRowTable(row.rowIndex);
numero = table.rows.length -2;
cell0.innerHTML = numero;
cell1.innerHTML = gerencia;
cell2.innerHTML = dni;
cell3.innerHTML = permiso;
cell4.innerHTML = eo;
// Hacer selectable la tabla para borrar la fila que seleccione
}
function onClickRowTable(index) {
alert(index);
console.log('onClickRowTable', index);
}
</script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Gestores</h1>
<p>Prueba técnica de la nueva aplicación web.</p>
</div>
<div class="container" style="margin-top: 16px;">
<table id="myTableTesting" class="table table-bordered table-hover">
<thead class="thead-dark" style="text-align: center">
<tr>
<th>
Nº
</th>
<th>
Gerencia
</th>
<th>
DNI
</th>
<th>
Permiso
</th>
<th>
EO
</th>
</tr>
</thead>
<tbody style="text-align: center">
<tr>
<td>
0
</td>
<td>
2134
</td>
<td>
54147890G
</td>
<td>
VE
</td>
<td>
OAFNIE
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2534
</td>
<td>
54145820C
</td>
<td>
INVB
</td>
<td>
OAFHIE
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<div class="container">
<h3 class="">
Añadir nuevo campo.
</h3>
<div class="column">
<input id="inputGerencia" type="text" placeholder="Gerencia" class="form-control">
<br />
<input id="inputDNI" type="text" placeholder="DNI" class="form-control">
<br />
<input id="inputPermiso" type="text" placeholder="Permiso" class="form-control">
<br />
<input id="inputEO" type="text" placeholder="EO" class="form-control">
</div>
<br />
<button type="button" class="btn btn-primary btn-block" onclick="addNewRow()">
Añadir
</button>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>解决方案
通过用 声明变量var，currentRow总是包含循环中的最后一个值：
尝试table.rows[i].rowIndex代替currentRow.rowIndex
或：currentRow使用let而不是声明变量var将为变量创建块范围。
let currentRow = table.rows[i];
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Test</title>
<script>
window.onload = () => {
var table = document.getElementById("myTableTesting");
var rows = table.getElementsByTagName("tr");
for (let i = 0; i < rows.length; i++) {
let currentRow = table.rows[i];
//console.log('currentRow', currentRow);
currentRow.onclick = () => onClickRowTable(currentRow.rowIndex);
}
}
function addNewRow() {
let gerencia = document.getElementById("inputGerencia").value;
let dni = document.getElementById("inputDNI").value;
let permiso = document.getElementById("inputPermiso").value;
let eo = document.getElementById("inputEO").value;
let numero = -1;
let table = document.getElementById("myTableTesting");
var row = table.insertRow(-1);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
row.onclick = () => onClickRowTable(row.rowIndex);
numero = table.rows.length -2;
cell0.innerHTML = numero;
cell1.innerHTML = gerencia;
cell2.innerHTML = dni;
cell3.innerHTML = permiso;
cell4.innerHTML = eo;
// Hacer selectable la tabla para borrar la fila que seleccione
}
function onClickRowTable(index) {
alert(index);
console.log('onClickRowTable', index);
}
</script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Gestores</h1>
<p>Prueba técnica de la nueva aplicación web.</p>
</div>
<div class="container" style="margin-top: 16px;">
<table id="myTableTesting" class="table table-bordered table-hover">
<thead class="thead-dark" style="text-align: center">
<tr>
<th>
Nº
</th>
<th>
Gerencia
</th>
<th>
DNI
</th>
<th>
Permiso
</th>
<th>
EO
</th>
</tr>
</thead>
<tbody style="text-align: center">
<tr>
<td>
0
</td>
<td>
2134
</td>
<td>
54147890G
</td>
<td>
VE
</td>
<td>
OAFNIE
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2534
</td>
<td>
54145820C
</td>
<td>
INVB
</td>
<td>
OAFHIE
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<div class="container">
<h3 class="">
Añadir nuevo campo.
</h3>
<div class="column">
<input id="inputGerencia" type="text" placeholder="Gerencia" class="form-control">
<br />
<input id="inputDNI" type="text" placeholder="DNI" class="form-control">
<br />
<input id="inputPermiso" type="text" placeholder="Permiso" class="form-control">
<br />
<input id="inputEO" type="text" placeholder="EO" class="form-control">
</div>
<br />
<button type="button" class="btn btn-primary btn-block" onclick="addNewRow()">
Añadir
</button>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>推荐阅读
- python - 带有 Python 函数 len() 的 Openpyxl 没有返回正确的长度值
- javascript - 无法通过 auth.onAuthStateChanged 中的 currentUser 访问 displayName - Firebase
- javascript - 使用 JavaScript / jQuery 创建基于 CSS 类的嵌套列表
- python - 如果另一列不包含熊猫中的特定文本，则基于列删除重复项
- react-beautiful-dnd - React-beautiful-dnd - 尝试在拖动列时添加或删除 Draggable... 警告
- ios - 之后更改 StackView 元素的高度
- c# - EPPlus - 数据透视表如何将值显示为总计的百分比
- sql - Postgresql 等价于这个基于 UUID 的函数
- puppeteer - Puppeteer js 查询并单击 td 内的链接，其中 td id 包含
- laravel - Laravel 不显示模型路径错误等错误