更改整个表格行的背景

Question

我希望根据标有＆＃34; Status＆＃34;的列的值，使表格的整行变色（背景颜色或文字颜色）。如果＆＃34;状态＆＃34;中的值列是＆＃34;已过期＆＃34;整行的背景应该改变。

（编辑：数据将从数据库中动态提取）。

有什么建议吗？

HTML代码

<table>
    <th>Bonus Competitions</th>
    <th>Value</th>
    <th>Link</th>
    <th>Expires</th>
    <th>Status</th>
    <tr>
        <td>Cash</td>
        <td>£500</td>
        <td><a href="#">Link</a></td>
        <td>18-Feb-17</td>
        <td>Active</td>
    </tr>
    <tr>
        <td>Sports Car</td>
        <td>£5000</td>
        <td><a href="#">Link</a></td>
        <td>18-Jan-17</td>
        <td>Expired</td>
    </tr>
</table>

提前致谢。

Answer 1

如果您可以更改表的呈现方式，那么我只需将文本添加为​​类。这将是性能最佳的选项，不需要JavaScript，内容也不会闪烁。

＆＃13;

＆＃13;

tr.Expired td {
  background-color: red;
}
tr.Active td {
  background-color: green;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Bonus Competitions</th>
      <th>Value</th>
      <th>Link</th>
      <th>Expires</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Active">
      <td>Cash</td>
      <td>£500</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Feb-17</td>
      <td>Active</td>
    </tr>
    <tr class="Expired">
      <td>Sports Car</td>
      <td>£5000</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Jan-17</td>
      <td>Expired</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

或者您需要运行读取单元格值并添加类的JavaScript代码。

＆＃13;

＆＃13;

$("tr:has(td:last:contains('Expired'))").addClass("Expired");

＆＃13;

tr.Expired td {
   background-color: red;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Bonus Competitions</th>
      <th>Value</th>
      <th>Link</th>
      <th>Expires</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cash</td>
      <td>£500</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Feb-17</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Sports Car</td>
      <td>£5000</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Jan-17</td>
      <td>Expired</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用CSS只向tr添加一个类。

tr.active > td {
  background-color: green;
}

tr.expired > td {
  background-color: red;
}

https://jsfiddle.net/jt717mL8/

Answer 3

在您的情况下，状态列是第5个。所以你可以这样做：

＆＃13;

＆＃13;

$('table tr:gt(0)').each(function(idx, ele) {
  if ($(ele).find('td:eq(4)').text() == 'Expired') {
  	$(ele).css('backgroundColor', 'yellow');
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <th>Bonus Competitions</th>
    <th>Value</th>
    <th>Link</th>
    <th>Expires</th>
    <th>Status</th>
    <tr>
        <td>Cash</td>
        <td>£500</td>
        <td><a href="#">Link</a></td>
        <td>18-Feb-17</td>
        <td>Active</td>
    </tr>
    <tr>
        <td>Sports Car</td>
        <td>£5000</td>
        <td><a href="#">Link</a></td>
        <td>18-Jan-17</td>
        <td>Expired</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以先获取状态索引th，然后使用相同的索引检查每个td并检查其文本。

var i = $('th:contains(Status)').index();
$('tr').each(function() {
  var td = $(this).find('td').eq(i);
  if (td.text() == 'Expired') td.css('background', 'red')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <th>Bonus Competitions</th>
  <th>Value</th>
  <th>Link</th>
  <th>Expires</th>
  <th>Status</th>
  <tr>
    <td>Cash</td>
    <td>£500</td>
    <td><a href="#">Link</a>
    </td>
    <td>18-Feb-17</td>
    <td>Active</td>
  </tr>
  <tr>
    <td>Sports Car</td>
    <td>£5000</td>
    <td><a href="#">Link</a>
    </td>
    <td>18-Jan-17</td>
    <td>Expired</td>
  </tr>
</table>