Estoy tratando de anular la selección de la misma fila si hace clic en la misma dos veces, ahora solo se desactiva si selecciona otra fila.
Me gustaría usar solo javascript puro para no tener que incluir jQuery en mi proyecto.
const tbody = document.getElementById("tbody"); let rowSelected; tbody.onclick = (e) => { for (let i = 0; i < e.path.length; ++i) { if (e.path[i].tagName == "TR") { selectRow(e.path[i]); break; } } }; function selectRow(r) { if (rowSelected !== undefined) rowSelected.style.backgroundColor = "blue"; rowSelected = r; rowSelected.style.backgroundColor = "black"; rowSelected.style.color = "white"; } <table id="display-table" class="table-layout tg"> <tbody id="tbody"> <tr class="tbblue"> <td class="tg-0pky tbaqua row">1</td> <td class="tg-0pky">press here</td> </tr> <tr class="tbblue"> <td class="tg-0pky tbaqua row">2</td> <td class="tg-0pky">press here</td> </tr> </tbody> </table>Refactorizaría un poco para alternar las clases de CSS en su lugar. Esa es una solución más limpia y fácil de mantener. Luego agregaría una función para borrar todas las filas. Probablemente haya métodos menos detallados, pero este es fácil de leer.
Tenga en cuenta que he refactorizado para modernizar y estandarizar también. e.path no es una propiedad de evento estándar, y podemos simplificar seleccionando todas las filas de una sola vez.
const rows = document.querySelectorAll('tbody tr'); rows.forEach(row => { row.addEventListener('click', () => { const rowWasSelected = row.classList.contains('selected-row'); deselectRows(); if (!rowWasSelected) { selectRow(row); } }); }); function selectRow(row) { row.classList.add('selected-row'); } function deselectRows() { rows.forEach(row => { row.classList.remove('selected-row'); }); } .selected-row { background-color: blue; color: white; } <table id="display-table" class="table-layout tg"> <tbody id="tbody"> <tr class="tbblue"> <td class="tg-0pky tbaqua row">1</td> <td class="tg-0pky">press here</td> </tr> <tr class="tbblue"> <td class="tg-0pky tbaqua row">2</td> <td class="tg-0pky">press here</td> </tr> </tbody> </table>Parece que ya has solucionado el problema. Todo lo que necesita agregar es restablecer el valor de 'rowSelected' o cambiar su color a azul siempre que sea así.
// in your selectRow function if(rowSelected === r) { // code here }Con la ayuda del comentario de Teemo y una pequeña modificación, obtuve el resultado deseado.
const tbody = document.getElementById("tbody"); let rowSelected; if (rowSelected !== undefined) rowSelected.style.backgroundColor = "lightblue"; tbody.addEventListener('click', e => { const row = e.target.closest('tr'); if (!row) {return;} if (rowSelected) { rowSelected.classList.remove('active'); } if (row === rowSelected) { rowSelected = null; } else { row.classList.add('active'); rowSelected = row; } }); .active { background-color: lightblue; } <table id="display-table" class="table-layout tg"> <tbody id="tbody"> <tr class="tbblue"> <td class="tg-0pky tbaqua row">1</td> <td class="tg-0pky">press here</td> </tr> <tr class="tbblue"> <td class="tg-0pky tbaqua row">2</td> <td class="tg-0pky">press here</td> </tr> </tbody> </table>