tengo esta función para detectar cuando hago clic en una fila de la tabla. Quiero que cambie la fila en la que se hizo clic en un color determinado y elimine la clase activa de todas las demás filas. Actualmente, solo hace que cada fila haga clic en rojo sin eliminar el color de las otras filas.
html:
var table = document.getElementsByTagName("table")[0]; var tbody = table.getElementsByTagName("tbody")[0]; var tbodyRows = table.getElementsByTagName("tr")[0]; tbody.onclick = function (e) { e = e || window.event; var target = e.srcElement || e.target; while (target && target.nodeName !== "TR") { target = target.parentNode; } tbodyRows.classList.remove('active'); target.classList.add('active'); }js:
<table id="data"> <thead> <tr> <th class="number" style="text-align:center">#</th> <th class="time" style="text-align:center">time</th> <th class="artist">artist</th> <th class="song">song</th> </tr> </thead> <tbody id="song-data"></tbody> </table>Esto debería funcionar. Observe cómo tBodyRows ahora hace referencia a todas las filas de la tabla (eliminó el [0] ) y cómo lo iteramos con forEach() .
var table = document.getElementsByTagName("table")[0]; var tbody = table.getElementsByTagName("tbody")[0]; var tbodyRows = table.getElementsByTagName("tr"); tbody.onclick = function (e) { e = e || window.event; var target = e.srcElement || e.target; while (target && target.nodeName !== "TR") { target = target.parentNode; } Array.from(tbodyRows).forEach(elem => { elem.classList.remove('active') }) target.classList.add('active'); }No es posible eliminar todo el color de las otras filas, porque no está eliminando las clases de otras filas, solo está eliminando una, creo que es una mejor manera de mostrarlo, así que hice esto (también creo que puedes refactorizar un poco más):
const table = document.getElementById('data'); let tableBody = table.querySelector('tbody'); tableBody.onclick = function (e) { let tableRows = table.querySelectorAll('tbody tr'); let target = e.target.parentNode; while (target.nodeName !== 'TR') { target = target.parentNode; } tableRows.forEach((element) => { element.classList.remove('active'); }); target.classList.add('active'); } .active { background-color: red; } <table id="data"> <thead> <tr> <th class="number" style="text-align:center">#</th> <th class="time" style="text-align:center">time</th> <th class="artist">artist</th> <th class="song">song</th> </tr> </thead> <tbody id="song-data"> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> </tbody> </table>