Fresher Fresher - 4 months ago 7
Javascript Question

How to change the color of the entire row on click of button

Hello i'm new to javascript/jquery.I have this page where the user will accept or reject the request. I want to change the color of the entire row depending on the button pressed.If Accept button is pressed then the entire row should change to red & for Reject button change to green.

<html>
<head>
<title>MRA</title>
<script type="text/javascript">
function Accept() {
alert("You have Accepted the Request!!");
}
function Reject() {
alert("You have Rejected the Request!!");
}
</script>
</head>
<body>
<h1 align="center">Book</h1>
<table align="center" width="100%">
<tr>
<td>
<?php
$result = mysqli_query($conn,"SELECT * from table ");
echo "
<table border='1' id='mytable' width='100%'>
<tr>
<th>Id</th>
<th>User Name</th>
<th>Purpose</th>
<th>Attendee</th>
<th>Date </th>
<th>StartTime</th>
<th>EndTime</th>
<th>Response</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td align='center'><input type='text' readonly size='1' name='textid' value=". $row['id']. "></td>";
echo "<td align='center'>" . $row['name'] . "</td>";
echo "<td align='center'>" . $row['purpose'] . "</td>";
echo "<td align='center'>" . $row['attendee'] . "</td>";
echo "<td align='center'>" . $row['date'] . "</td>";
echo "<td align='center'>" . $row['starttime'] . "</td>";
echo "<td align='center'>" . $row['endtime'] . "</td>";
echo "<td align='center'>" . '<input type="button" value="Accept" name="txtaccept" onclick="Accept()">&nbsp;&nbsp;&nbsp;<input type="button" value="Reject" name="txtreject" onclick="Reject()">' . "</td>";
echo "</tr>";
}
echo "</table>";
?>
</td>
</tr>
</table>
</body>
</html>

Answer

for script part:

<script type="text/javascript">
function Accept(el)
{
   var tr = el.parentNode.parentNode; //tr
   tr.className = "accepted";
}
function Reject(el)
{
   var tr = el.parentNode.parentNode; //tr
   tr.className = "rejected";
}
</script>

for css part:

<style type="text/css">
table { border-collapse: collapse; } //to remove cell spacings
table td { padding: 2px; }
tr.accepted, tr.accepted td { background-color: green; }
tr.rejected, tr.rejected td { background-color: red; }
</style>

for html part:

onclick="Accept(this)" 

and

onclick="Reject(this)" //to pass the input elements to the functions