I have a select box that in default state looks as default (white, etc) but when I select a different value, I want the entire table row to highlight in yellow.
I did this, but I want to make it better and more concise and more efficient. Can you help?
Also I will have several such boxes, not just one. Feel free to change/add/remove identifiers, I am looking for a better solution overall.
$(document).ready(function() {
$("#closedRow").on('change', function() {
if ($("#closedRow").val() != 0)
$("#trRow").css('background-color', 'yellow');
else
$("#trRow").css('background-color', 'white');
})
$("#serviceRow").on('change', function() {
if ($("#serviceRow").val() != 0)
$("#trRow2").css('background-color', 'yellow');
else
$("#trRow2").css('background-color', 'white');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="trRow">
<td>Closed:</td>
<td><select name="closed" id="closedRow">
<option value="0">Show All</option>
<option value="1">Hide Closed</option>
</select></td>
</tr>
<tr id="trRow2">
<td>Service:</td>
<td><select name="service" id="serviceRow">
<option value="0">Show All</option>
<option value="1">Hide Service</option>
<option value="2">Another Service</option>
</select></td>
</tr>
<table>