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

Question

Question

table format

asked on March 5, 2021

I would like to be able to highlight a cell or row of data in a table in a form depending on a value calculated in a cell within the row. 

 

For instance I have a table with three columns

Column A, Column B, and Column C

If at any time Column B > Column C, I'd like either Column B background to be yellow or the entire row to be yellow.

0 0

Answer

SELECTED ANSWER
replied on March 5, 2021

This assumes your table has a class name of myTable (lines 3 and 4), and your fields have class names of columnB (line 8) and columnC (line 10).  This also assumes you are doing integer comparison (the two parseInt functions on line 13 - if your values are decimal numbers, then use parseFloat instead of parseInt).  This also assumes you are using the table element instead of the collection element.

CSS: 

.yellow {background-color: yellow!important;}

 

Javascript to highlight field B: 

$(document).ready(function () {
  
  $('.myTable').change(addYellowToInputs);
  $('.myTable').click('.cf-table-add', addYellowToInputs);
  
  function addYellowToInputs()
  {
    $('.columnB input').each(function() {
      var bValue = $(this).val();
      var cValue = $(this).closest('tr').find('.columnC input').val();
      if(parseInt(bValue) > parseInt(cValue))
      {
        $(this).addClass('yellow');
      }
      else
      {
        $(this).removeClass('yellow');
      }
    });
  }
  
});

 

Javascript to highlight the row: 

$(document).ready(function () {
  
  $('.myTable').change(addYellowToRows);
  $('.myTable').click('.cf-table-add', addYellowToRows);
  
  function addYellowToRows()
  {
    $('.columnB input').each(function() {
      var bValue = $(this).val();
      var cValue = $(this).closest('tr').find('.columnC input').val();
      if(parseInt(bValue) > parseInt(cValue))
      {
        $(this).closest('tr').addClass('yellow');
      }
      else
      {
        $(this).closest('tr').removeClass('yellow');
      }
    });
  }
  
});

 

2 0

Replies

replied on March 8, 2021

Thank you!

1 0
replied on March 8, 2021

Happy to help.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.