title: How to mark all values that are different in table column?
body: <p>I have jQuery data-table that displays history records. There are eight different columns with date values.</p>
  <p>I would like to set a background color for every value that is different in each column. For example in the first column the first row has <code>1st Qtr Start Date 03/01/2020</code>, then second row has <code>1st Qtr Start Date 03/02/2020</code>, and the third row has the <code>1st Qtr Start Date 03/01/2020</code>.</p>
  <p>In that case the second row column that has <code>1st Qtr Start Date 03/02/2020</code> should be marked with the red background. I'm not sure what would be the best method to catch the value change inside of the each column. Also, is it possible to do this before the table is initialized? Thank you.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let data = {
    "1": {
      "fiscal_year": 2020,
      "q1_start_9902_susp_dt": "03/01/2020",
      "q2_end_9902_susp_dt": "12/31/2020",
      "q4_end_9902_susp_dt": "04/30/2021",
      "q1_end_9902_susp_dt": "12/31/2020",
      "q4_start_9902_susp_dt": "12/31/2020",
      "q2_start_9902_susp_dt": "02/08/2020",
      "q3_start_9902_susp_dt": "07/16/2020",
      "q3_end_9902_susp_dt": "12/31/2020"
    },
    "2": {
      "fiscal_year": 2020,
      "q1_start_9902_susp_dt": "03/02/2019",
      "q2_end_9902_susp_dt": "09/30/2020",
      "q4_end_9902_susp_dt": "09/30/2020",
      "q1_end_9902_susp_dt": "09/30/2020",
      "q4_start_9902_susp_dt": "12/31/2019",
      "q2_start_9902_susp_dt": "04/30/2019",
      "q3_start_9902_susp_dt": "07/31/2019",
      "q3_end_9902_susp_dt": "09/30/2020"
    },
    "3": {
      "fiscal_year": 2020,
      "q1_start_9902_susp_dt": "03/01/2020",
      "q2_end_9902_susp_dt": "12/31/2020",
      "q4_end_9902_susp_dt": "04/30/2021",
      "q1_end_9902_susp_dt": "12/31/2020",
      "q4_start_9902_susp_dt": "12/31/2020",
      "q2_start_9902_susp_dt": "02/08/2020",
      "q3_start_9902_susp_dt": "07/16/2020",
      "q3_end_9902_susp_dt": "12/31/2020"
    },
    "4": {
      "fiscal_year": 2020,
      "q1_start_9902_susp_dt": "03/02/2019",
      "q2_end_9902_susp_dt": "09/30/2020",
      "q4_end_9902_susp_dt": "09/30/2020",
      "q1_end_9902_susp_dt": "09/30/2020",
      "q4_start_9902_susp_dt": "12/31/2019",
      "q2_start_9902_susp_dt": "04/30/2019",
      "q3_start_9902_susp_dt": "07/31/2019",
      "q3_end_9902_susp_dt": "09/30/2020"
    },
    "5": {
      "fiscal_year": 2019,
      "q1_start_9902_susp_dt": "01/31/2020",
      "q2_end_9902_susp_dt": "12/31/2020",
      "q4_end_9902_susp_dt": "04/30/2021",
      "q1_end_9902_susp_dt": "12/31/2020",
      "q4_start_9902_susp_dt": "12/31/2020",
      "q2_start_9902_susp_dt": "02/08/2020",
      "q3_start_9902_susp_dt": "07/16/2020",
      "q3_end_9902_susp_dt": "12/31/2020"
    },
    "6": {
      "fiscal_year": 2019,
      "q1_start_9902_susp_dt": "03/01/2019",
      "q2_end_9902_susp_dt": "09/30/2020",
      "q4_end_9902_susp_dt": "09/30/2020",
      "q1_end_9902_susp_dt": "09/30/2020",
      "q4_start_9902_susp_dt": "12/31/2019",
      "q2_start_9902_susp_dt": "04/30/2019",
      "q3_start_9902_susp_dt": "07/31/2019",
      "q3_end_9902_susp_dt": "09/30/2020"
    }
  };
  
  dialogBox = function(title, message, size) {
    title = title || 'HCS System';
    message = message || 'HCS Dialog Box';
    size = size || 'lg';
  
    let dialog = bootbox.dialog({
      onEscape: true,
      backdrop: true,
      size: size,
      title: '&lt;strong&gt;' + title + '&lt;/strong&gt;',
      message: message
    });
    dialog.prop("id", "dialog-box");
  };
  
  $("#history").on("click", function() {
    displayHistory(data);
  });
  
  displayHistory = function(data) {
    let $div_reponsive = $('&lt;div class="table-responsive"&gt;&lt;/div&gt;'),
      $table = $('&lt;table width="100%"&gt;').addClass('table table-striped table-bordered').prop("id", "tbl-history"),
      $thead = $('&lt;thead&gt;&lt;tr class="bg-custom"&gt;&lt;th class="text-center"&gt;Fiscal Year&lt;/th&gt;&lt;th class="text-center"&gt;1st Quarter Start&lt;/th&gt;&lt;th class="text-center"&gt;1st Quarter End&lt;/th&gt;&lt;th class="text-center"&gt;2nd Quarter Start&lt;/th&gt;&lt;th class="text-center"&gt;2nd Quarter End&lt;/th&gt;&lt;th class="text-center"&gt;3rd Quarter Start&lt;/th&gt;&lt;th class="text-center"&gt;3rd Quarter End&lt;/th&gt;&lt;th class="text-center"&gt;4th Quarter Start&lt;/th&gt;&lt;th class="text-center"&gt;4th Quarter End&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;'),
      $tbody = $('&lt;tbody&gt;');
      
    if ($.isEmptyObject(data)) {
      let $tr = $('&lt;tr&gt;&lt;td class="text-center" colspan="12"&gt;No records were found.&lt;/td&gt;&lt;/tr&gt;');
      $tbody.append($tr);
    } else {
      for (key in data) {
        let $tr = $('&lt;tr&gt;');
        $tbody.prepend($tr);
        $tr.append($('&lt;td&gt;').text(data[key].fiscal_year ? data[key].fiscal_year : "N/A").attr("data-order", data[key].fiscal_year).addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q1_start_9902_susp_dt ? data[key].q1_start_9902_susp_dt : "N/A").addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q1_end_9902_susp_dt ? data[key].q1_end_9902_susp_dt : "N/A").addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q2_start_9902_susp_dt ? data[key].q2_start_9902_susp_dt : "N/A").addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q2_end_9902_susp_dt ? data[key].q2_end_9902_susp_dt : "N/A").addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q3_start_9902_susp_dt ? data[key].q3_start_9902_susp_dt : "N/A").addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q3_end_9902_susp_dt ? data[key].q3_end_9902_susp_dt : "N/A").addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q4_start_9902_susp_dt ? data[key].q4_start_9902_susp_dt : "N/A").addClass('text-center'));
        $tr.append($('&lt;td&gt;').text(data[key].q4_end_9902_susp_dt ? data[key].q4_end_9902_susp_dt : "N/A").addClass('text-center'));
      }
    }
  
    $div_reponsive.append($table.append([$thead, $tbody]));
    dialogBox('History', $div_reponsive, 'xl');
    $('#tbl-history').DataTable({
      order: [[ 0, "desc" ]],
      lengthMenu: [
        [5, 10, 25, 50, -1],
        [5, 10, 25, 50, "All"]
      ],
      pageLength: 5
    });
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  &lt;button class="btn btn-primary" id="history"&gt;Show History&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>