CODEWITHSUNDEEP
javascript
Robin Groot
Robin Groot

Reputation: 92

How can I deselect by clicking only with javascript

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>

Upvotes: 1

Views: 316

Answers (3)

Robin Groot
Robin Groot

Reputation: 92

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>

Upvotes: 0

isherwood
isherwood

Reputation: 61083

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>

Upvotes: 1

Sami Salih İbrahimbaş
Sami Salih İbrahimbaş

Reputation: 315

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 
}

Upvotes: 0

Related Questions