Javascript list.js 额外 class 基于值

Question

我的以下代码运行良好，但我仍然无法使用 class bg-success 为单元格着色，因为我使用 list.js 创建表格。

我想要的是，如果利润值小于 0，则应将 class bg-danger 添加到 var options 中的项目，如下所示（第 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 和 return 的值，一个包含 bg-danger class 的 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;
}

Answer 2

不幸的是，当我检查页面时，下面的代码给出了以下错误：

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

"profit"甚至是一个可能的变量吗？

目前完整的 javascript 看起来像这样：

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

Javascript list.js 额外 class 基于值

Javascript list.js extra class based on value

javascript

html

html-table

listjs

list.js