Javascript list.js extra class based on value

Question

I have the following code that is working perfectly, but I am still not able to color cells with for example class bg-success due to the fact I use list.js to create tables.

What I would like is that if the profit value is less than 0, class bg-danger should be added to the item in var options like this (line 15):

<td class="profit bg-danger"></td>

Is there any possible solution for this?

<table class="table table-hover table-striped table-condensed results results-table results-table--active" id="footer">
  <tr class="table-row-header">
    <th><i class="sort" data-sort="currency">Currency</i></th>
    <th><i class="sort" data-sort="profit">Profit (%)</i></th>
  </tr>
  <tbody class="list">
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<script>
  var options = {
    valueNames: [ 'currency', 'profit' ],
    item: '<tr><td class="currency"><td class="profit"></td></tr>'
  };

  var userList = new List('trades', options);

  var trades = (function () {
    var trades = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "trades.json",
        'dataType': "json",
        'success': function (data) {
            trades = data;
        }
    });
    return trades;
  })();

      userList.add({
        currency: obj['currency'],
        profit: obj['profit'].toFixed(2)+'%'
      });

Answer 1

You can do that by adding a function to check the value of profit and return an HTML string that includes the bg-danger class, if appropriate.

See below for an example.

var options = {
  valueNames: ['currency', 'profit'],
  item: checkProfit(profit)
};

function checkProfit(prof) {
  // return HTML string based on value of profit
  var str = '<tr><td class="currency"><td class="profit"></td></tr>';
  if (prof < 0) {
    str = '<tr><td class="currency"><td class="profit bg-danger"></td></tr>';
  }
  return str;
}

Answer 2

Unfortuantly the below code gives the following error when I inspect the page:

"Uncaught ReferenceError: profit is not defined"

  var options = {
    valueNames: [ 'startdate', 'currency', 'channel', 'exchange', 'mode', 'buyprice', 'stoploss', 'ask', 'target', 'profit' ],
    item: checkProfit(profit)
  };

  function checkProfit(prof) {
    // return HTML string based on value of profit
    var str = '<tr><td class="currency"></td><td class="profit"></td></tr>';
    if (prof < 0) {
      str = '<tr><td class="currency"></td><td class="profit bg-danger"></td></tr>';
    }
    return str;
  }

is "profit" even a possible variable?

currently the full javascript looks like this:

<script>
  var options = {
    valueNames: [ 'currency', 'profit' ],
    item: checkProfit(profit)
  };

  function checkProfit(prof) {
    var str = '<tr><td class="currency"></td><td class="profit bg-success"></td></tr>';
    if (prof < 0) {
      str = '<tr><td class="currency"></td><td class="profit bg-danger"></td></tr>';
    }
    return str;
  }

  var tradeList = new List('trades', options);

  var trades = (function () {
    var trades = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "trades.json",
        'dataType': "json",
        'success': function (data) {
            trades = data;
        }
    });
    return trades;
  })();

  $(function() {
  var count = 0;
  $.each(trades, function(_, obj) {
    tradeList.add({
      currency: obj['currency'],
      profit: obj['profit_percentage'].toFixed(2)+'%'
    });
  }

  });
  });

</script>