he declarado la siguiente función que tiene como objetivo enviar por consola el índice de una celda correspondiente a una tabla HTML, seleccionándola con un click.
// variable global
let tbl = document.querySelector('#tablaTest');
function dataSelect() {
let td = tbl.querySelectorAll('td');
let id;
td.forEach(element => {
element.addEventListener('click', showIndex(element.cellIndex));
});
}
// función vinculada a un botón
function showIndex(index) {
console.log(index);
}
pero al momento de presionar el botón vinculado a esta función, imprime los índices de cada celda existente en la tabla
pero al escribir la misma función de esta manera
function dataSelect() {
let td = tbl.querySelectorAll('td');
td.forEach(element => {
element.addEventListener('click', () => {
console.log(element.cellIndex);
});
});
}
si funciona adecuadamente, mostrando solo el índice de la celda que fue seleccionada.
Por que ocurre esto ? Como podría declarar una función externa y que solo envíe el índice de una celda seleccionada ?
Muchas gracias.
HTML
<table id="tablaTest">
<thead>
<tr>
<th>Juan Alberto</th>
<th>martin lopes</th>
<th>maite suarez</th>
<th>55</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Alberto</td>
<td>martin lopes</td><input type="checkbox"><input type="checkbox">
<td>maite suarez</td>
<td>55</td>
</tr>
<tr>
<td>luis morales</td>
<td>mateo carralde</td>
<td>33</td>
<td>imbecil</td>
</tr>
<tr>
<td>Diana rodrigues</td>
<td>carlos hernandez</td>
<td></td>
<td></td>
</tr>
<tr>
<td>luis perez</td>
<td>diego gutierres</td>
<td>44</td>
<td>mongolico</td>
</tr>
</tbody>
</table>