title: Change color of table cell in javascript based on other cell's value
body: <p>I am displaying a table on the webpage as follows:</p>
  
  <pre><code>ID  | Val      | Num
  ABC | Value1   | 1
  ABC | Value1   | 0.8
  CDB | Value 2  | 0.5
  </code></pre>
  
  <p>I want that if the cell value in <code>Num</code> column for that row is between 1 and 0.8, then the background color of the corresponding <code>Val</code> column's cell should be <code>red</code>, if between 0.7 to 0.5 then <code>orange</code>, and below it <code>yellow</code>.</p>
  
  <p>I'm using <code>DataTables</code></p>
  
  <p>Below is my <code>js</code> code:</p>
  
  <pre><code>for (col_id = 0; col_id &lt; csv_data[row_id].length; col_id++) {
            if (col_id === 2) {
  
                row_html += "&lt;td&gt;" + parseFloat(csv_data[row_id][col_id]) + "&lt;/td&gt;";
            }
            else {
                row_html += "&lt;td&gt;" + csv_data[row_id][col_id] + "&lt;/td&gt;";
            }
              }
  
              row_html += "&lt;/tr&gt;";
              $('#' + el + '-table tbody').append(row_html);
            }
  
            $('#' + el + '-table').DataTable(datatables_options);
  </code></pre>
  
  <p>I tried to add the background color to the cell using the <code>style.backgroundColor</code> but I don't think it's working. I added this inside the for loop:</p>
  
  <pre><code>if (col_id === 1) {
                if (parseFloat(csv_data[row_id][2]) &lt;= 1 &amp;&amp; parseFloat(csv_data[row_id][2]) &gt; 0.7)
                {
                row_html.style.backgroundColor = 'ec8e8e'
                }
            }
  </code></pre>
  
  <p>But it's not working. Could anybody tell me how to do it?? Thanks!</p>
  
  <p>UPDATE:</p>
  
  <p>My <code>csvToHtml.js</code> file:</p>
  
  <pre><code>var CsvToHtmlTable = CsvToHtmlTable || {};
  
  CsvToHtmlTable = {
      init: function (options) {
  
        options = options || {};
        var csv_path = options.csv_path || "";
        var el = options.element || "table-container";
        var allow_download = options.allow_download || false;
        var csv_options = options.csv_options || {};
        var datatables_options = options.datatables_options || {};
        var custom_formatting = options.custom_formatting || [];
  
        $("#" + el).html("&lt;table class='table table-striped table-condensed' id='" + el + "-table'&gt;&lt;/table&gt;");
  
        $.when($.get(csv_path)).then(
          function(data){      
            var csv_data = $.csv.toArrays(data, csv_options);
  
            var table_head = "&lt;thead&gt;&lt;tr&gt;";
  
            for (head_id = 0; head_id &lt; csv_data[0].length; head_id++) { 
              table_head += "&lt;th&gt;" + csv_data[0][head_id] + "&lt;/th&gt;";
            }
  
            table_head += "&lt;/tr&gt;&lt;/thead&gt;";
            $('#' + el + '-table').append(table_head);
            $('#' + el + '-table').append("&lt;tbody&gt;&lt;/tbody&gt;");
  
            for (row_id = 1; row_id &lt; csv_data.length; row_id++) { 
              var row_html = "&lt;tr&gt;";
  
              //takes in an array of column index and function pairs
              if (custom_formatting != []) {
                $.each(custom_formatting, function(i, v){
                  var col_idx = v[0]
                  var func = v[1];
                  csv_data[row_id][col_idx]= func(csv_data[row_id][col_idx]);
                })
              }
  
                for (col_id = 0; col_id &lt; csv_data[row_id].length; col_id++) {
            if (col_id === 2) {
  
                row_html += "&lt;td&gt;" + parseFloat(csv_data[row_id][col_id]) + "&lt;/td&gt;";
            }
            else {
                row_html += "&lt;td&gt;" + csv_data[row_id][col_id] + "&lt;/td&gt;";
            }
  
  
              }
  
              row_html += "&lt;/tr&gt;";
              $('#' + el + '-table tbody').append(row_html);
            }
  
            $('#' + el + '-table').DataTable(datatables_options);
  
            if (allow_download)
              $("#" + el).append("&lt;p&gt;&lt;a class='btn btn-info' href='" + csv_path + "'&gt;&lt;i class='glyphicon glyphicon-download'&gt;&lt;/i&gt; Download as CSV&lt;/a&gt;&lt;/p&gt;");
          });
      }
  }
  </code></pre>
  
  <p>My <code>index.html</code> file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;CSV to HTML Table&lt;/title&gt;
  
  
  
  &lt;!-- Bootstrap core CSS --&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="css/dataTables.bootstrap.css" rel="stylesheet"&gt;
  
  &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
  &lt;!--[if lt IE 9]&gt;
    &lt;script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  </code></pre>
  
  <p></p>
  
  <p>
      </p>
  
  <pre><code>   &lt;h2&gt;CSV to HTML Table&lt;/h2&gt;
  
    &lt;div id='table-container'&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- /.container --&gt;
  
  
  &lt;!-- Bootstrap core JavaScript
  ================================================== --&gt;
  &lt;!-- Placed at the end of the document so the pages load faster --&gt;
  &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.csv.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/dataTables.bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/csv_to_html_table.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
    function format_link(link){
      if (link)
        return "&lt;a href='" + link + "' target='_blank'&gt;" + link + "&lt;/a&gt;";
      else
        return "";
    }
    CsvToHtmlTable.init({
      csv_path: 'data/fatty_acid_profiles.csv',
      element: 'table-container', 
      allow_download: true,
      csv_options: {separator: ','},
      datatables_options: {"paging": false},
      custom_formatting: [[2, format_link]]
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>