Jquery problem animation or not animation-CodePudding

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>

CodePudding user response：

$(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

CodePudding user response：

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