classList.remove/classList.add для строки в таблице (JS)

Question

.StrClass - выделяет строку.

Не получается сделать так, чтобы при нажатии на строку, ей добавлялся класс (.StrClass), который меняет background.

Функции classList.remove/classList.add по отдельности работают, но как сделать, чтобы при нажатии на другую строку, у остальных строк в таблице убирался класс ".StrClass" ?

    .StrClass {
      /* background-color: #B6B7C1; */
      background-color: #00dcff;
    }

<!-- НАЧАЛО Таблицы-->
    <div class="table-responsive table-bordered" id="table_for_js">
        <table class=" table table-hover fontlabelheader table_granica" id="job-table">
            <thead>
                <tr>
                    <th scope="col" title="Редактировать">Ред.</th>
                    <th scope="col" title="Номер строки">№</th>
                    <th scope="col" title="ID записи">ID</th>
                </tr>
            </thead>
            <tbody class="text-center tableBody">
      <tr id='row_9'><td>ред</td><td>1</td><td>171</td><</tr>
        <tr id='row_10'><td>ред</td><td>2</td><td>141</td><</tr>
          <tr id='row_11'><td>ред</td><td>3</td><td>111</td><</tr>
   
            </tbody>
        </table>
    </div>
    <!-- КОНЕЦ Таблицы ->

Answer 1

let rows = document.querySelectorAll('tbody tr');

document.addEventListener('click' , ()=>{
  rows.forEach( row => row.classList.contains('StrClass') ? row.classList.remove('StrClass') : null);
  event.target.closest('.row')?.classList.add('StrClass');
});

.StrClass {
      /* background-color: #B6B7C1; */
      background-color: #00dcff;
    }

<div class="table-responsive table-bordered" id="table_for_js">
        <table class=" table table-hover fontlabelheader table_granica" id="job-table">
            <thead>
                <tr>
                    <th scope="col" title="Редактировать">Ред.</th>
                    <th scope="col" title="Номер строки">№</th>
                    <th scope="col" title="ID записи">ID</th>
                </tr>
            </thead>
            <tbody class="text-center tableBody">
      <tr id='row_9' class = 'row'><td>ред</td><td>1</td><td>171</td><</tr>
        <tr id='row_10' class = 'row'><td>ред</td><td>2</td><td>141</td><</tr>
          <tr id='row_11' class = 'row'><td>ред</td><td>3</td><td>111</td><</tr>
   
            </tbody>
        </table>
    </div>

БЛОГ НА HUSL

classList.remove/classList.add для строки в таблице (JS)

Ответы (1 шт):