更改整个表格行的背景

Question

我想根据标记为“状态”的列的值，使整个表格行改变颜色（背景颜色或文字颜色）。如果“状态”列中的值为“已过期”，则整行的背景应更改。

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

有什么建议吗？

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>

谢谢您提前的支持。

- Asad Hussain

---

你如何渲染行？ - dfsq

展示一下你使用的动态设置代码；是通过jQuery还是直接通过PHP循环实现的？ - Shubhranshu

Answer 1

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

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

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

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

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

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

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

- epascarello

---

th 不应该是表格的直接子元素。 - dfsq

我知道，也许修复它是有意义的。否则许多人可能认为它是可以接受的。 - dfsq

Answer 2

在您的情况下，状态列是第5列。因此，您可以执行以下操作：

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

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

- gaetanoM

---

如果我们决定将“已过期”文本更改为其他内容，或者可能添加图标，会发生什么？没错，需要再次更改JS代码。如果我们想要更改颜色或背景会发生什么？再次更改JS！因此，在4行代码中，您硬编码了两个问题。这使得它成为一个相当糟糕的答案。 - dfsq

Answer 3

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

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

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

https://jsfiddle.net/jt717mL8/

- marco burrometo

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>

- Nenad Vracar

---

我曾在另一个回答中留下了这个评论（现已删除），但你的回答也存在同样的问题。代码只有四行，却集中了低质量的内容。在代码中硬编码“Expired”单词，直接更改CSS样式...最后，这些事情应该在表格渲染期间处理。 - dfsq