Question

I’ve been struggling to find a solution to achieve this. I have an HTML form populated with data from a database. The table consists of 6 columns, one column is named ‘Status’ which has a drop down menu in each of the cells underneath. The menu consist of three values ‘Pending’ ‘Approved’ and ‘Disapproved’ when a user selects a value from the dropdown all cells on that row should change colour (Green – Approved , Amber – Pending , Red – Dissapproved)

Here is my code so far:

<?php
$result = mysql_query("SELECT * FROM Orders")
or die (mysql_error());
?>
<table class="table1" style="background-color:#ffffff;" >
<h4>Purchase Orders</h4>
<tr>
<th>Order Number</th>
<th>Order Date</th>
<th>Ordered By</th>
<th>Supplier</th>
<th>Total Price</th>
<th>Status</th>
</tr>
<?php
while($row=mysql_fetch_array($result)){
echo "</td><td>";
echo $row['Orderno'];
echo "</td><td>";
echo $row['Orderdate'];
echo "</td><td>";
echo $row['Orderedby'];
echo "</td><td>";
echo $row['Supplier'];
echo "</td><td>£";
echo $row['totalprice'];
echo "</td><td>";
echo '  <select id="'.$row['Orderno'].'" onchange="myJSFunction(this)">
<option></option>
<option>Approved</option>
<option>Pending</option>
<option>Disapproved</option>                  
</select>';
echo "</td></tr>";
}
echo "</table>";
?>

It would be greatly appreciated if somebody could point me in the right direction. How to create three functions for each colour change and then apply them to each option value. If I apply to Orderno, will all cells on that row be affected?

Answer 1

I know you didn’t tag your question with jQuery, however if it is an option, you can use this:

$(document).ready(function() {
    var color = ['none', 'green', 'yellow', 'red'];
    $('table.table1').on('change','select', function() {
        $(this).parents('tr').css('background', color[$(':selected', this).index()]);
    });​
});

jsFiddle example