title: How can i change color in a table when i changes values in the table? I get the values from db with json
body: <p>When I click on the <code>checkbox</code> and the value of that row changes or when i add a new workout and the table changes i want it to change color... I don't know how to proceed. </p>
  
  <p>Please help me :)</p>
  
  <p>I think it could be something like this:  <code>$('#TblWorkouts input').on('change'</code>  but I'm don't know. </p>
  
  <p>Jag har en uppgift att lämna in där ett krav är att när en rad i tabellen ändras ska den få en annan färg men jag vet inte hur jag ska gå till väga.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
     
  
     
      &lt;script&gt;
  
          *$('#TblWorkouts input').on('change'  &lt;!--- how to make the table row change color when a value has been changed or a new row have been added?  --&gt;*
  
          function getAllWorkouts() {
              $.getJSON("./index1.php/controller/getWorkouts", function (jsondata){
                  showWorkoutsInTable(jsondata);
              });
          }
  
  
  
              function addWork() {
  
                  let workoutet=$("#textWork").val();
  
                 // var checkedValue = $('.messageCheckbox:checked').val();
                 let donet=$("#CheckDone:checked").val();
                  alert(donet);
  
  
                  $.post("./index1.php/controller/addWorkout",{workout:workoutet, done:donet}, function (jsondata) {
                      alert(jsondata['klar']);
                  })
                  getAllWorkouts();
  
          }
  
          function updateWorkout() {
              let idt=$("#txtId").val();
  
              let donet=$("#done:checked").val();
  
              $.post("./index1.php/controller/updateWorkout",{id:idt, done:donet}, function (jsondata) {
                  alert(jsondata['svar']);
              });
  
          }
  
          function showWorkoutsInTable(jsondata) {
              let table=$("#TblWorkouts");
              table.empty();
              $.each(jsondata, function(idx, workout){
                  table.append("&lt;tr&gt;");
                  table.append("&lt;td&gt;"+workout['id']+" &lt;/td&gt;");
                  table.append("&lt;td&gt;"+workout['workout']+" &lt;/td&gt;");
                  table.append("&lt;td&gt;"+workout['date']+" &lt;/td&gt;");
                  if(workout['done']==1){
                      table.append("&lt;td&gt; &lt;input onclick='updateWorkout()' type=\"checkbox\" checked value='1' id=\"done\"&gt;Ja&lt;/input&gt;&lt;/td&gt;");
                  }
                  else{
                      table.append("&lt;td&gt; &lt;input onclick='updateWorkout()' type=\"checkbox\" value='1' id=\"done\"&gt;Ja&lt;/input&gt;&lt;/td&gt;");
                  }
                  table.append("&lt;td&gt;"+workout['done']+"&lt;/td&gt;");
                  table.append("&lt;/tr&gt;");
  
              })
  
          }
  
                 $(document).ready(function(){
              getAllWorkouts();
          });
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;h1&gt;Tittis träning&lt;/h1&gt;
  &lt;/div&gt;
  
  
  &lt;addForm style="width:25%" &gt;
      &lt;label&gt; Träning: &lt;/label&gt;
      &lt;input type="text" class="form-control" id="textWork" required&gt;
      &lt;label for="checkDone"&gt;Utförd: &lt;/label&gt;
      &lt;input type="checkbox" id="CheckDone" value="1" &gt;Ja&lt;/input&gt;
  
      &lt;button onclick="addWork()" class="btn btn-primary"&gt;Lägg till&lt;/button&gt;
  &lt;/addForm&gt;
  
  &lt;br&gt;
  &lt;table class="table" id="TblWorkouts" style="max-width: 50%"&gt;
  
  
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>