当我更改表格中的值时，如何更改表格中的颜色？我用 json 从 db 获取值答案

【问题标题】：How can i change color in a table when i changes values in the table? I get the values from db with json当我更改表格中的值时，如何更改表格中的颜色？我用 json 从 db 获取值
【发布时间】：2018-03-15 17:43:23
【问题描述】：

当我点击checkbox 并且该行的值发生变化时，或者当我添加新的锻炼并且表格发生变化时，我希望它改变颜色......我不知道如何继续。

请帮帮我:)

我认为可能是这样的：$('#TblWorkouts input').on('change'，但我不知道。

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>

【问题讨论】：

也就是说，你问的是如何使用change方法？
是的，我想是的，我怎样才能使用更改方法，所以当它感觉到更改时，它会更改该行的颜色:) 所以是的，请：D

标签： javascript jquery checkbox

【解决方案1】：

由于我不确定如何查看您的 sn-p（它应该做什么），这是change 方法的简单用法，用于切换第一行的类，将其着色为红色。

$('input').change(function() {
  $('tr:first-child').toggleClass('active');
});

tr.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />

<table>
  <tr>
    <td>Row #1</td>
  </tr>
    <tr>
    <td>Row #2</td>
  </tr>
    <tr>
    <td>Row #3</td>
  </tr>
</table>

您可以仅使用 css 轻松完成此操作，无需脚本（这总是更好）。

input:checked + table tr:first-child {
  background: red;
}

<input type="checkbox" />

<table>
  <tr>
    <td>Row #1</td>
  </tr>
    <tr>
    <td>Row #2</td>
  </tr>
    <tr>
    <td>Row #3</td>
  </tr>
</table>

您可以阅读有关:checked 选择器here 的更多信息。

【讨论】：

你帮助我真是太棒了。它是一个锻炼网站，我可以在其中输入锻炼内容。如果我已经完成了锻炼，请使用复选框。当我单击复选框时，我的数据库（使用 mySql）将“完成”的值更改为 1，如果未选中复选框，则数据库将值更改为 0，如果数据库中的值为零，则表中的复选框应不加检查。当某些事情发生变化时，如果我选中或取消选中一个或添加新的锻炼，该变化应在表格中突出显示。所以我不希望所有选中的复选框都变红。只有已更改的行。