First, are you using Number fields to help avoid getting any "non-numeric" values in the fields? The reason I ask is that it will help clean up the code a lot and you can set upper and lower limits (i.e., no more than 100, or no less than 0).
To make it work, you need a way to identify your "regular hours" field, your table, and the affected columns.
I would do this with classes and add the following CSS classes to the respective elements, for example, you could do something like
- "How many hours do you work...." - normalHours
- Scheduled Hours table - scheduledHours
- Each "day" field - hoursWorked
Then, add a JavaScript handler to evaluate the values and take the necessary actions
$(document).ready(function(){
// detects changes in the "Scheduled Hours" table
// filtered to only react to changes in the "hours worked" field
// this "event bubbling" is usually the best way to deal with table rows
$('.scheduledHours table').on('change','.hoursWorked input',function(){
// get the value of the normal hours and the field that changed
var normal = parseInt($('.normalHours input').val());
var actual = parseInt($(this).val());
// verify that both values are numbers and check if the actual is higher
if(!isNaN(normal) && !isNaN(actual) && actual > normal){
// add a class to flag it for the highlighting
$(this).addClass('abnormalHours');
}
// otherwise, treat it like a normal field
else{
$(this).removeClass('abnormalHours');
}
});
});
Now, add CSS to handle your styling. The example below makes the font red, but you could just change that to do the border, background, etc. depending on your preference.
.abnormalHours {
color: red;
}
Now things get more complicated if you need to handle other situations. For example, if they enter all their data then go back and change their normal hours, nothing will happen.
If you want to account for that, then you would need additional processes to "revalidate" all of the fields each time the "normal hours" field changes.