You are viewing limited content. For full access, please sign in.

Question

Question

highlight fields in table if greater than outside field

asked on January 13, 2020

I would like to highlight certain fields in a table that are greater than an outside field. The user enters their average work hours per day.

The table is populated based on this number, but the employee needs to alter any deviations in the schedule. I would like any fields that do not match the regular work hours to either highlight or change the font color.

There are similar posts in Answers dealing with word values, but I am not skilled enough to edit the code at this point.

I would greatly appreciate any help!

0 0

Answer

SELECTED ANSWER
replied on January 13, 2020 Show version history

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

  1. "How many hours do you work...." -   normalHours
  2. Scheduled Hours table - scheduledHours
  3. 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.

0 0
replied on January 14, 2020

Line 5 had the table as .scheduledHours, but your instructions above said to use CSS class hoursTable. After I change this, it worked perfectly. 

Thank you for your help.

0 0
replied on January 14, 2020

Didn't even notice. That's what happens when you start writing the post before you code the example, sorry about that lol.

0 0
replied on January 14, 2020

You mentioned upper and lower limits above...

How can I set a lower limit equivalent to the number of normal hours? I don't want people to be able to enter anything lower than that.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.