Jquery problem animation or not animation

Question

First of all I'm new to jquery, so I don't know if it's possible, hence my question.

I have a problem to solve, but my doubt is it possible to solve it without animation or I will have to switch to animation.

<script type="text/javascript">
    $().ready( function() {
        
    $('table').on('click', 'tr', function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).addClass('inactive');
            }
        });
            
    $( "div" ).html( " <table class='table'><tbody><tr class='active'> <td><span>Row 1</span></td><td><span>Row 1 </span></td> <td><span>Row 1</span></td></tr></tbody></table>" );
    })
</script>

<style type="text/css">
.active{
    background-color:gray;
}

.inactive{
    background-color:white ;
}
</style>
</head>
<body>
   <div></div>
</body>
</html>

Answer 1

 $(document).ready(function() { $("div").html(" <table class='table'><tbody><tr class='active'> <td><div class='row active'>Row 1</div></td><td><div class='row'>Row 1 </div></td> <td><div class='row'>Row 1</div></td></tr></tbody></table>"); $('.row').on('click', function() { if ($(this).toggleClass('active')) { $(this).removeClass('active'); $(this).toggleClass('inactive'); } }); })

 .active { background-color: gray; }.inactive { background-color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div>

You can switch color. Please check this

Answer 2

Thanks I kind of modified something in your code and it turned out the way I wanted

$(document).ready(function() {
  $("div").html(" <table class='table'><tbody><div ><tr class='row active'> <td>Row 1</td><td>Row 1 </td> <td>Row 1</td></tr></tbody></table>");

  $('.row').on('click', function() {
    if ($(this).toggleClass('active')) {
      $(this).removeClass('active');
      $(this).toggleClass('inactive');
    }
  });
})

instead of being per item i changed it to be by the whole row

Jquery problem animation or not animation

Question

1 answers

solution1
0 2022-09-22 06:15:22

solution2
0 2022-09-23 02:40:47

Jquery problem animation or not animation

Question

1 answers

solution1 0 2022-09-22 06:15:22

solution2 0 2022-09-23 02:40:47

solution1
0 2022-09-22 06:15:22

solution2
0 2022-09-23 02:40:47