Checked checkbox change specific td background color in tr

Question

I want to change the background color of the td when I checked the checkbox. But I don't know how to make it done. Please help me.

Each tr will consist a row of data. And each data part will have a checkbox which allow user to check it to highlight those specific data only.

I want to make it look like this.

//The script is empty because I don't know how to write

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    width: 10%;
}

td {
    text-align: center;
    border: 1px solid black;
}

.selected {
    background: red;
}



    
        
        
        
    
    
        
            <% for(let a = 0; a < 10; a ++){ %>
                
            <% } %>
        
            
                1
                2
                3
                4
                5
                6
                7
                8
                9
            

                    X
                    X
                    
                    X
                    X
                    
                    X
                    X

George Chond · Accepted Answer

Without the need of any data attributes and assuming you want to mark a specific group of cells together, you can do something like this:

Select all input triggers
Attach an eventListener to each one of them with 'change'
For the index of each triggered input, adjust with the variable 'markUpTo' how many cells you want to mark from the start. Keep in mind the index limits.
Toggle a 'selected' class up to that point that will handle the background color change.
With this method you can easily scale this solution to include groups of 4,5,6 etc...

document.querySelectorAll('#myTable input').forEach((btn, i) => {
  btn.addEventListener("change", () => {

    // If first button changed, it is also the last
    let startingIndex = 0;
    let endingIndex = parseInt(document.querySelectorAll('#myTable input')[0].dataset.group) - 1;

    // If anything else, we need to calculate the correct start/end indexes
    if (i !== 0) {
      for (let y = 0; y < i; y++) {
        startingIndex += parseInt(document.querySelectorAll('#myTable input')[y].dataset.group);
        endingIndex += parseInt(document.querySelectorAll('#myTable input')[y + 1].dataset.group);
      }
    }

    for (let a = startingIndex; a <= endingIndex; a++) document.querySelectorAll('#myTable tr td')[a].classList.toggle('selected');
  });
});

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  width: 5%;
}

td {
  text-align: center;
  border: 1px solid black;
  transition: all 0.3s ease;
}

.selected {
  background: red;
}

Checked checkbox change specific td background color in tr

Answers (2)

Related Questions