patternhtmlMinor
Select box to highlight choice deviation
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.
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.
Then use it like so:
I created the example here: https://codepen.io/anon/pen/bWraNB
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.