I am trying to deselect the same row if you click on the same one twice now it only deactivates if you select another row.
I would like to only use pure javascript so I don't have to include jQuery in my project.
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>I'd refactor a bit to toggle CSS classes instead. That's a cleaner and more maintainable solution. Then I'd add a function to clear all rows. There are probably less verbose methods, but this one's easily readable.
Note that I've refactored to modernize and standardize as well. e.path isn't a standard event property, and we can simplify by selecting all rows in one shot.
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>You seem to have already solved the problem. All you need to add is to reset the value of 'rowSelected' or change its color to blue provided that.
// in your selectRow function
if(rowSelected === r) {
// code here
}
With the help of Teemo's comment and a small modification, I got my desired result.
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>