Select box to highlight choice deviation

Question

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>

Answer 1

Maybe use a generic function to set the css on change if you don't have anything other than colors. It also helps with dry.

function evt_highlightRow() {
    row = $(this).parent().parent()
    if ($(this).val() != 0)
      row.css('background-color', 'yellow');
    else
      row.css('background-color', 'white');
}

Then use it like so:

$(some_target_nested_2_deep).on('change', evt_highlightRow);

// such as your select
$('select').on('change', evt_highlightRow);
// or a generic class applied to inputs in the same general location
$('.highlightRowTarget').on('change', evt_highlightRow);

I created the example here: https://codepen.io/anon/pen/bWraNB

Answer 2

$(document).ready(function() {


  $("#closedRow,#serviceRow").on('change', function() { // you can use multiple selector to factorize your code
  // here $(this) = $(idOfChangedElement) 
  // $(idOfChangedElement).closest("tr") will select the parent tr of the changed element
 // then you can run with your code
   /* if ($(this).val() != 0)
      $(this).closest("tr").css('background-color', 'yellow');
    else
      $(this).closest("tr").css('background-color', 'white');
  })
*/
// or use css add toggle or add and remove class

  ($(this).val() != 0)? $(this).closest("tr").addClass("notShowed"):$(this).closest("tr").removeClass("notShowed");
})
});

.showed{
  background-color:white;
}
.notShowed{
  background-color:yellow;
}

<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>