Question

长话短说 - 我显示股票交易表和试图将表格行颜色设置为红色或绿色，这意味着它已经购买＆＃39;或者＆＃39;出售＆＃39;。

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

...etc

使用jQuery：

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

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

那么，我应该如何解决它只检查＆＃39; buysell＆＃39;单元格值（＆＃39; B＆＃39;到greenBg，＆＃39; S＆＃39;到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不会向该行添加任何类。

Answer 2

$(document).ready(function(){
   $('table.dataframe tr td').each(function(){
            if($(this).text() == 'B'){
              $(this).addClass('greenBg'); //colors the td
             //$(this).parent().addClass('greenBg'); //colors the entire row

           }
     else if($(this).text() == 'S'){
              $(this).addClass('redBg');
             //$(this).parent().addClass('redBg'); //colors the entire row

           }

   });
});

Answer 3

您可以查看td的{{1}}或tr。因此，它只检查您想要的值的表格单元格/行。

我做了两个例子，一个着色整行或只是着色选定的nth-child

td

JSFIDDLE EXAMPLE (Color to only the TD)

// Checks through the td elements which contain 'B' or 'S'
$("td:nth-child(3):contains('B')").addClass('greenBg');
$("td:nth-child(3):contains('S')").addClass('redBg');

JS FIDDLE EXAMPLE (Color to the whole row)

jQuery - 按单元格颜色tr

3 个答案: