Changing background color onclick on a specific table row
Question
I want to change the background color of a specific clicked table row. It also should change it back to the original color. Back and forth from red to green. And it should also check the checkbox. Green = checkbox checked/ Red = checkbox unchecked.
The rows look like this <tr id="<?php echo $row['id'] ?>" value="<?php echo $row['id'] ?>">
and for JQUERY I have this:
$(document).ready(function() {
$('.table tr').click(function(event) {
var id = $(this).attr('id');
var bcolor = $('.task').css('background-color');
console.log(id);
console.log(bcolor);
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
if (bcolor == 'rgb(205, 92, 92)') {
$('.task').css('background-color', 'green');
} else {
$('.task').css('background-color', 'indianred');
}
};
});
});
How can I use the var id = $(this).attr('id'); to change the background color only for the specific clicked row?
Right now it makes every row green by clicking on any of them.
Whole main.php:
Header
<?php include 'taskpdo.php';?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do List</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
</head>
Body
<body>
<!-- CONFIRM MESSAGE -->
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif?>
<div class="spacer">
<!-- Heading -->
<div class="heading">
<h2>To Do List</h2>
</div>
<!-- Userinformation -->
<div class="logout">
<?php if (isset($_SESSION['username'])): ?>
<p>Welcome<strong><?php echo $_SESSION['username']; ?></strong></p>
<p><a href="main.php?logout='1'">logout</a></p>
<?php endif?>
</div>
</div>
Table
<table class="table">
<thead>
<tr>
<th>Check</th>
<th>UID</th>
<th>Username</th>
<th>Num</th>
<th>Tasks</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
$tasks = sqlsrv_query($db,
"SELECT * FROM todo
join registrieren
on username = ersteller
where username = '" . $_SESSION['username'] . "'");
Rows
$i = 1;
while ($zeile = sqlsrv_fetch_array($tasks)) {
?>
<tr id="<?php echo $zeile['id'] ?>" type="checkbox" name="check[]" value="<?php echo $zeile['id'] ?>">
<td class="task"><input type="checkbox" id="check--<?php echo $zeile['id'] ?>"></td>
<input type="hidden" name="id" value="<?php echo $zeile['id']; ?>">
<td class="task" ><?php echo $zeile['uid'] ?></td>
<td class="task" ><?php echo $zeile['username'] ?></td>
<td class="task" ><?php echo $zeile['id'] ?></td>
<td class="task" id="<?php echo $zeile['id'] ?>" ><?php echo $zeile['task'] ?></td>
<td class="task" onclick="myFunction(<?php echo $zeile['id'] ?>)">
<form method="post" action="main.php">
<button type="submit" name="edit">
Edit
</button>
<input type="hidden" name="id" value="<?php echo $zeile['id']; ?>">
<input type="hidden" name="task" value="<?php echo $zeile['task']; ?>">
</form>
</td>
<td class="task" onclick="myFunction(<?php echo $zeile['id'] ?>)">
<form method="post" action="main.php" >
<button type="submit" name="delete">
Delete
</button>
<input type="hidden" name="id" value="<?php echo $zeile['id']; ?>">
</form>
</td>
</tr>
<?php
$i++;}
?>
</tbody>
</table>
Buttons
<form method="post" action="main.php" class="input_form">
<input type="hidden" name="ersteller" value="<?php echo $_SESSION['username']; ?>">
<?php
if ($update == true): ?>
<input type="text" name="task" class="task_input" value="<?php echo $task ?>">
<button type="submit" name="update" id="add_btn" class="add_btn">Update</button>
<input type="text" name="id" value="<?php echo $id ?>">
<?php else: ?>
<input type="text" name="task" class="task_input">
<button type="submit" name="addtask" id="add_btn" class="add_btn">Add Task</button>
<input type="hidden" name="id" value="<?php echo $id ?>">
<?php endif ?>
</form>
</body>
</html>
2 answers
solution1
0 ACCPTED 2019-09-18 16:11:58
You can use toggleClass of jQuery:
// css for put in your element
.common-class {
background-color: #ff0000; // replace for your color
}
.highlight-class {
background-color: #0000ff !important; // replace for your color
}
$('your-selector').toggleClass('highlight-class'); // jQuery
solution2
0 2019-09-19 07:28:46
Bensilson's answer helped me and i want to clarify what i have done:
I delete the class='task' inside the <td> and put it into the <tr> - Tag.
I've done a .highlighttask{background-color: green !important} inside the css.
And inside the js i've done
$(document).ready(function() {
$(".table tr").on('click', function() {
var checked = $(this).find('input[type="checkbox"]');
checked.prop('checked', !checked.is(':checked'));
$(this).toggleClass('highlighttask');
});
});
Now it overrights the background-color on a specific row AND it checks the checkbox of the specific row. Thanks!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.