**When i klick the checkbox 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 dont know how to proceede. Please help me :)
I think it could be something like this: $('#TblWorkouts input').on('change' but i dont know.
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.**
<!DOCTYPE html>
<html lang="en">
<head>
<script>
*$('#TblWorkouts input').on('change' <!--- how to make the table row change color when a value has been changed or a new row have been added? -->*
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("<tr>");
table.append("<td>"+workout['id']+" </td>");
table.append("<td>"+workout['workout']+" </td>");
table.append("<td>"+workout['date']+" </td>");
if(workout['done']==1){
table.append("<td> <input onclick='updateWorkout()' type=\"checkbox\" checked value='1' id=\"done\">Ja</input></td>");
}
else{
table.append("<td> <input onclick='updateWorkout()' type=\"checkbox\" value='1' id=\"done\">Ja</input></td>");
}
table.append("<td>"+workout['done']+"</td>");
table.append("</tr>");
})
}
$(document).ready(function(){
getAllWorkouts();
});
</script>
</head>
<body>
<div>
<h1>Tittis träning</h1>
</div>
<addForm style="width:25%" >
<label> Träning: </label>
<input type="text" class="form-control" id="textWork" required>
<label for="checkDone">Utförd: </label>
<input type="checkbox" id="CheckDone" value="1" >Ja</input>
<button onclick="addWork()" class="btn btn-primary">Lägg till</button>
</addForm>
<br>
<table class="table" id="TblWorkouts" style="max-width: 50%">
</table>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire