How to change background-color of one row from table in PHP

[1]https://i.stack.imgur.com/413Bh.png

[2]https://i.stack.imgur.com/lUO2i.png

Hi, can someone HELP me with this problem? I need to change color of the row where is checkbox checked.

<form method="post">
<input type="hidden" name="checkbox<?=$row["ID"];?>" value="0">
<input type="checkbox"
 id="checkbox<?=$row["ID"];?>"
name="checkbox<?=$row["ID"];?>"
<?=($page->checkbox_state > 0) ? 'checked=checked' : 'unchecked'?>
onchange="submit();">
</form>

This is my checkbox system.

<style type="text/css"> 
        table{
            border-collapse: collapse;
            width: 100%;
            color: #d96459;
            font-family: monospace;
            font-size: 20px;
            text-align: center;
        }
        th {
            
            background-color: #d96459;
            color: white;
        }
         tr:nth-child(2n) {
            background-color: #f2f2f2;
    }
}
    </style>

This is my css

if($row["Barva"] > 0){  //I need some if when $barva (from sql) is > then 0 so it's yellow. 
        echo $row[Barva];
        echo"<style>
         tr {
         background-color: yellow;
} </style>";
    }
        if(isset($_POST["checkbox$row[ID]"])) {
            if($row["Barva"] == 0)
            {
                $sql = "UPDATE Monitory SET Barva='1' WHERE id=$row[ID]";
                $v1 = $conn->query($sql);
                $color = "yellow";
                $sql1 = "UPDATE Monitory SET Color='".$color."' WHERE id=$row[ID]";  
                $result = $conn->query($sql1);
                echo"<meta http-equiv='refresh' content='0'>";
                echo $color;
            }
            else
            {
                $sql = "UPDATE Monitory SET Barva='0' WHERE id=$row[ID]";
                $v = $conn->query($sql);
                $color = "";
                $sql1 = "UPDATE Monitory SET Color='".$color."' WHERE id=$row[ID]";  
                $result = $conn->query($sql1);
                echo"<meta http-equiv='refresh' content='0'>";
            }
}

Thank you for all tips

Answer

Here is an example to follow :

Be sure to include the jquery lib in your web app.

//html
<table class="colorchange">
  <tr>
    <td>test content for this row</td>
    <td>test content for this row</td>
    <td><input type="checkbox"/></td>
  </tr>
  <tr>
    <td>test content for this row</td>
    <td>test content for this row</td>
    <td><input type="checkbox"/></td>
  </tr>
  <tr>
    <td>test content for this row</td>
    <td>test content for this row</td>
    <td><input type="checkbox"/></td>
  </tr>
  <tr>
    <td>test content for this row</td>
    <td>test content for this row</td>
    <td><input type="checkbox"/></td>
  </tr>
  <tr>
    <td>test content for this row</td>
    <td>test content for this row</td>
    <td><input type="checkbox"/></td>
  </tr>
</table>

//js(jquery)
$('table.colorchange input[type=checkbox]').click(function () {
    $(this).closest('tr').toggleClass("highlight", this.checked);
});

// css
.highlight {
    background-color: #ccc;
}

Advertisement

Answer