Javascript list.js 基于值的额外类

Question

我有以下代码可以完美运行，但由于我使用 list.js 创建表格，我仍然无法使用例如类 bg-success 为单元格着色。

我想要的是，如果利润值小于 0，则应将 bg-danger 类添加到 var 选项中的项目，如下所示(第 15 行):

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

有什么可能的解决方案吗？

<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

您可以通过添加一个函数来检查 profit 的值并返回包含 bg-danger 类(如果适用)的 HTML 字符串来做到这一点。

请参阅下面的示例。

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;
}