javascript - jQuery - 按单元格值对 tr 着色

Question

长话短说 - 我正在显示股票交易表并尝试将表行颜色设置为红色或绿色，表示“买入”或“卖出”。

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>board</th>
      <th>buysell</th>
      <th>openinterest</th>
      <th>price</th>
      <th>quantity</th>
      <th>seccode</th>
      <th>secid</th>
      <th>time</th>
      <th>tradeno</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>FUT</td>
      <td>B</td>
      <td>2912686</td>
      <td>67686</td>
      <td>100</td>
      <td>SiZ5</td>
      <td>3630</td>
      <td>23.09.2015 11:12:27</td>
      <td>1239572664</td>
    </tr>

...等

使用 jQuery:

$("tr:contains('B')").addClass('greenBg');
$("tr:contains('S')").addClass('redBg');

但它实际上是根据所有内容对行进行着色。

那么，我应该如何解决这个问题以仅检查“buysell”单元格值(“B”到 greenBg，“S”到 redBg)并将颜色设置为整行，而不仅仅是第一个单元格？

提前致谢!

Answer 1

这是一种方法:

var classes = {
  'B': 'greenBg',
  'S': 'redBg'
};

$('table.dataframe tbody tr').addClass(function() {
   return classes[this.cells[2].textContent];
});

如果单元格的 textContent 没有对应的键(textContent 不是 B 或 S)，该函数返回 undefined 并且 addClass 不会向该行添加任何类。