Question

我想要一行的颜色取决于值

以下是代码：但始终采用第一种颜色。

$(document).ready(function() {
  $('#myTable td.xs').each(function() {
    if ($(this).text() < 10) {
      $(this).closest('tr').css('background-color', 'green');
    } else {
      $(this).closest('tr').css('background-color', 'red');
    }
  });
});

HTML：

 <tr class="xs">
    <td class="xs">5/td>
    <td class="xs">10</td>
    <td class="xs">12</td>
 </tr>

Answer 1

在您的情况下，所有<td>共享相同的<tr>，因此循环设置的最后颜色将获胜（示例中为红色，因为上一个<td>具有{ {1}}）。因此，您需要更改25的颜色，或者需要将<td>添加到各自的<td>中，或者您需要更具体地了解<tr> <td>在你想要使用的<tr>中。

选项1：更改<td>的颜色：

$(document).ready(function() {
  $('#myTable td.xs').each(function() {
    if ($(this).text() < 10) {
      $(this).css('background-color', 'green');
    } else {
      $(this).css('background-color', 'red');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr class="xs">
    <td class="xs">5</td>
    <td class="xs">10</td>
    <td class="xs">12</td>
  </tr>
</table>

选项2：个人<tr>：

$(document).ready(function() {
  $('#myTable td.xs').each(function() {
    if ($(this).text() < 10) {
      $(this).closest('tr').css('background-color', 'green');
    } else {
      $(this).closest('tr').css('background-color', 'red');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr class="xs">
    <td class="xs">5</td>
  </tr>
  <tr class="xs">
    <td class="xs">10</td>
  </tr>
  <tr class="xs">
    <td class="xs">12</td>
  </tr>
</table>

以相同颜色显示表格行

1 个答案: