HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

Select box to highlight choice deviation

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
deviationchoiceselectboxhighlight

Problem

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');

})
})




Closed:

Show All
Hide Closed



Service:

Show All
Hide Service
Another Service


Solution

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

Code Snippets

$(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);

Context

StackExchange Code Review Q#162440, answer score: 3

Revisions (0)

No revisions yet.