Estoy tratando de encontrar al hacer clic en un atributo de datos del elemento tr de una tabla con el evento de clic delegado, pero no devuelve nada, ¿en qué me equivoco?
Hice un violín para probar y probar
document.querySelector('table#listaCar tbody').addEventListener('click', e => { if (e.target.matches(".car-item")) { alert(e.target.getAttribute('data-id-car')); } }); table#listaCar tbody tr { cursor: pointer; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <table id="listaCar" class="table table-bordered table-hover bg-white"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Status</th> <th scope="col">Date</th> <th scope="col">N. IUV</th> </tr> </thead> <tbody> <tr data-id-car="4140" class="car-item"> <td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td> </tr> <tr data-id-car="4129" class="car-item"> <td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td> </tr> </tbody> </table>e.target es el td , no el tr .
La solución más fácil es usar .parentNode para obtener el padre de td : el tr , luego puede probar usando matches y obtener el atributo de data como desee
const tr = e.target.parentNode; if (tr.matches(".car-item")) { alert(tr.getAttribute('data-id-car')); } document.querySelector('table#listaCar tbody').addEventListener('click', e => { const tr = e.target.parentNode; if (tr.matches(".car-item")) { alert(tr.getAttribute('data-id-car')); } }); table#listaCar tbody tr { cursor: pointer; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <table id="listaCar" class="table table-bordered table-hover bg-white"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Status</th> <th scope="col">Date</th> <th scope="col">N. IUV</th> </tr> </thead> <tbody> <tr data-id-car="4140" class="car-item"> <td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td> </tr> <tr data-id-car="4129" class="car-item"> <td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td> </tr> </tbody> </table>Debe hacer una prueba en el clic del elemento para ver si es una celda de la tabla (TD) y si está tomando el padre.
En mi ejemplo, estoy recorriendo todas las filas para aplicar el clic.
document.querySelectorAll('.car-item').forEach(item => { item.addEventListener('click', e => { let el = e.target.tagName === "TD" ? e.target.parentElement : e.target; alert(el.getAttribute('data-id-car')); }); }); table#listaCar tbody tr { cursor: pointer; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <table id="listaCar" class="table table-bordered table-hover bg-white"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Status</th> <th scope="col">Date</th> <th scope="col">N. IUV</th> </tr> </thead> <tbody> <tr data-id-car="4140" class="car-item"> <td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td> </tr> <tr data-id-car="4129" class="car-item"> <td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td> </tr> </tbody> </table>