0

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>
2
  • 1
    No puedes poner así la llamada a la función en el addeventListener del forEach. Así estás haciendo que se ejecute en el momento. Si quieres pasarle un parámetro y que no se ejecute, debes ponerlo de la segunda manera que pusiste
    – Suso
    Commented el 11 jun. 2022 a las 7:57
  • Entiendo, es que al declararlo de esa manera la función queda anónima y no se puede ejecutar el método removeListener, el cual tengo como intencion hacerlo al presionar cualquier parte de la pantalla, para poder así evitar que se siga generando el indice al presionar las celdas. Existe alguna alternativa ? Gracias
    – Lester
    Commented el 11 jun. 2022 a las 14:15

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.