jquery when check box checked then parent tr + other rowspan tr background change

user_9215205 0
Viewed 97

How can I change my rowspan tr elements background when check box checked? tr elements have rowspan attribute.

My JS Code is..

 $(document).ready(function(){
    $('.test-table-list input[type="checkbox"]').click(function(){
    if($(this).is(':checked')){
        $(this).parents('tr').css('background', 'yellow');
       
    }else{
        $(this).parents('tr').css('background', '#fff');
        
    }
    });
 });

when i used this code then tr change like this image

enter image description here

I don't think the html code is necessary, so I won't attach it.

I want the background color of all related tr(colspan) elements related to checked tr to change.

===== EDIT ====

i attached my full code at CODEPEN

https://codepen.io/hongkt/pen/NWvxoOE

Does anyone know the answer? i want all realated tr elements background color change.

html jquery javascript
3 Answers

Use a class and toggle it

$(function(){
  $('.test-table-list input[type="checkbox"]').on("click", function() {
    $(this).closest('tr').toggleClass('yellowClass',this.checked)
  })
})
user_2957830

You can try by following method by putting whole part (the tr tags which need to have same background) in a separate container (maybe span p h1 , here used div)

Wraping of tr with div tag is a invalid html as told by @mplungjan

And then select that tag using .parentElement or .closest(tried this but can't worked out , you can surely give it a try) .

And then selected the tr tag and run a forEach loop and applied background to all .

var y

function func(e) {
  if (e.checked) {
    e.parentElement.parentElement.parentElement.querySelectorAll('tr').forEach(y => y.style.backgroundColor = 'rgb(255, 222, 89)')
    //document.body.style.backgroundColor = "red"
  } else {
    e.parentElement.parentElement.parentElement.querySelectorAll('tr').forEach(y => y.style.backgroundColor = '#fff')
    //document.body.style.backgroundColor = "blue"
  }
}
td {
  border: 1px solid #ccc
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<table class='order-list'>
  <div>
    <tr>
      <td rowspan='3'><input type='checkbox' onclick="func(this)" /></td>
      <td>test</td>
      <td rowspan='3'>test1</td>
      <td rowspan='3'>test2</td>
      <td>test3</td>
      <td rowspan='3'>test4</td>
    </tr>
    <tr>
      <td>test3</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test3</td>
      <td>test3</td>
    </tr>
  </div>
</table>

As the above code is using querySelectorAll so all tr tags are selected and have a backgroundColor , you can try a more specific way and select only inside div . One can be .getElementsByTagName("tr") and then loop through using for loop

But the main thing, to easy the work is to keep them in a separate container(div)

user_168463460

What you need is to change you jquery script to:

 $(document).ready(function(){
$('.order-list input[type="checkbox"]').click(function(){
    if($(this).is(':checked')){
        var el = $(this).parents('tr');
        el.css('background', 'rgb(255, 222, 89)');
        el.next().css('background', 'rgb(255, 222, 89)');
        el.next().next().css('background', 'rgb(255, 222, 89)');
    }else{
        var el = $(this).parents('tr');
        el.css('background', '#fff');
        el.next().css('background', '#fff');
        el.next().next().css('background', '#fff');
    }
});});

UPDATE FOR VARIABLE SUB ROWS

the modification to the html is to encase what you want to be coloured in a tbody tag and then jquery can be manipulated accordingly.

$(document).ready(function(){
    $('.order-list input[type="checkbox"]').click(function(){
        if($(this).is(':checked')){
            $(this).closest('tbody').css('background', 'rgb(255, 222, 89)');
        }else{
            $(this).closest('tbody').css('background', '#fff');
        }
    });

 });
<table class='order-list'>
<tbody>
  <tr>
    <td rowspan='3'><input type='checkbox' /></td>   
    <td >test</td>
    <td rowspan='3'>test1</td>
    <td rowspan='3'>test2</td>
    <td >test3</td>
    <td rowspan='3'>test4</td>
  </tr>
  <tr><td >test3</td><td >test3</td></tr>
  <tr><td >test3</td><td >test3</td></tr>
</tbody>
<tbody>
  <tr>
    <td rowspan='3'><input type='checkbox' /></td>   
    <td >test</td>
    <td rowspan='3'>test1</td>
    <td rowspan='3'>test2</td>
    <td >test3</td>
    <td rowspan='3'>test4</td>
  </tr>
  <tr><td >test3</td><td >test3</td></tr>
  <tr><td >test3</td><td >test3</td></tr>
</tbody>
</table>

user_54765980
Related