Javascript select entire row (change background color) of a table with checkbox and deselect when next checkbox is clicked

Question

I have table where I want to select entire row (change background color). Rows are selected by a checkbox and when a next row is selected, the previous row has to deselect.

This is my table

<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;
}

I named every table cell with class="row". Calculating an interval in which a specific row is positioned and using the for loop, I should be able to set background color to those table cells. Intervals are: for the first row its 0-3, second 4-7 and third 8-11.

I tried this:

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
}

It works for the first row, but second row and third row sometimes don't check off and don't get deselected. I don't know what could be a problem.

Answer 1

You can always clear all your checkboxes and your background colors and then apply the correct background color and check the checkbox using the row index and checkbox index

Also you need to assign classes to you rows in order to get them with getElementsByClassName not to cells.

Avoid using global variables, you don't need them.

Fiddle proof: 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>

Answer 2

The problem is lay in checkboxes[clear1].checked = false; , because there're only 3 checkboxes, not like rows, so you should use the following line instead:

checkboxes[clear1 / 4].checked = false;

where clear1 / 4 will be 0, 1, 2 respectively when the lines were selected before.