Javascript выделить всю строку (изменить цвет фона) таблицы с помощью флажка и отменить выбор при нажатии следующего флажка

Question

У меня есть таблица, в которой я хочу выбрать всю строку (изменить цвет фона). Ряды выбираются флажком, и когда выбирается следующий ряд, предыдущий ряд должен быть отменен.

Это моя таблица

<table id="table" border="1">
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
  </tr>
  <tr>
    <td class='row'>
      <input type='checkbox' class='check' onclick='markRow(0)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr>
    <td class='row'>
      <input type='checkbox' class='check' onclick='markRow(1)'>       
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr>
    <td class='row'>
      <input type='checkbox' class='check' onclick='markRow(2)'>       
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
</table>

#table{
  border-collapse: collapse;
}

Я назвал каждую ячейку таблицы class = "row". Вычислив интервал, в котором расположена указанная строка c, и используя для l oop, я смогу установить цвет фона для этих ячеек таблицы. Интервалы: для первого ряда его 0-3, второго 4-7 и третьего 8-11.

Я пробовал это:

var clear1 = 0;
var clear2 = 0;
//these two should clear the previous row

var counter = 0;  
//this will ensure that clearing doesn't happen the first time


//function parameter is given by this checkbox from table  
//<input type='checkbox' class='check'onclick='markRow(0)'> 
function markRow(rowNumber){  
  var row = document.getElementsByClassName('row');
  var checkboxes = document.getElementsByClassName('check');

  var interval = rowNumber*4;

  for(var i=interval;i<=interval+3;i++){
    row[i].style = "background-color: dodgerblue;";
  }
  //for example if function gets parameter rowNumber=2, then it will color the cells in interval 8-11

  counter++;
  if(counter>1){
    for(var i=clear1;i<=clear2;i++){
      row[i].style = "";
    }
    checkboxes[clear1].checked = false;
  }
  clear1 = interval;
  clear2 = interval+3;
  //these two will save the interval from the current row and next time, for loop will delete style 
  //using this interval
}

Это работает для первого ряда, но второй ряд и третий ряд иногда не отмечаются и не отменяются. Я не знаю, в чем может быть проблема.

Answer 1

Проблема заключается в checkboxes[clear1].checked = false;, потому что есть только 3 флажка, а не строки, поэтому вы должны использовать следующую строку:

checkboxes[clear1 / 4].checked = false;

, где clear1 / 4 будет 0, 1, 2 соответственно, когда линии были выбраны ранее.

Answer 2

Вы всегда можете снять все свои флажки и цвета фона, а затем применить правильный цвет фона и установить флажок, используя индекс строки и индекс флажка

Также вам необходимо назначить классы для строк, чтобы получите их с getElementsByClassName, а не в ячейки.

Избегайте использования глобальных переменных, они вам не нужны.

Подтверждение скрипки: https://jsfiddle.net/en20wa9j/

function markRow(rowNumber) {
  const row = document.getElementsByClassName('rowclass');
  const checkboxes = document.getElementsByClassName('check');
  // clear everything
  for (let i = 0; i < row.length; i++) {
    row[i].style = "background-color: transparent";
    checkboxes[i].checked = false;
  }
  // check the checkbox and color the row
  checkboxes[rowNumber].checked = true;
  row[rowNumber].style = "background-color: dodgerblue;";
}

<table id="table" border="1">
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
  </tr>
  <tr class='rowclass'>
    <td>
      <input type='checkbox' class='check' onclick='markRow(0)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr class='rowclass'>
    <td>
      <input type='checkbox' class='check' onclick='markRow(1)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
  <tr class='rowclass'>
    <td>
      <input type='checkbox' class='check' onclick='markRow(2)'>
    </td>
    <td class='row'>-</td>
    <td class='row'>-</td>
    <td class='row'>-</td>
  </tr>
</table>