时间戳

首页 > 解决方案 > 在值（状态）为“是”的条件下使用 jquery 更改我的 html 列（td）的背景颜色

jquery - 在值（状态）为“是”的条件下使用 jquery 更改我的 html 列（td）的背景颜色

问题描述

我的网页中有一个 html 表，我想将列上的背景设置Shipped为红色，它的状态是 Yes。

我的表如下所示：

|     Order-id        |     Item         |      Price          | Shipping         |
|---------------------|------------------|---------------------|------------------|
|          1          |       Item1      |        100          |     Yes          |
|          2          |       Item2      |        200          |      No          |
|          3          |       Item3      |        300          |      No          |
|          4          |       Item3      |        400          |      Yes         |
|          5          |      Item4       |        500          |      Yes         |

我使用脚本在控制台中获得了值

<script>
$('#myTable > tbody > tr > td:nth-child(4)').each(function(){
        console.log($(this).text();)  // Getting Yes, No Properly
        if($(this).text() == 'Yes')
        {
            $(this).css('background-color', 'red');
        } 
</script>

但它不会出现在 if 语句中，任何帮助都会受到重视。先感谢您。

标签： jqueryhtml

解决方案

最好只设置一个类，而不需要任何 javascript 来完成它。但是您可以使用 contains() 来匹配文本。

$('#orders tbody tr td:nth-child(4):contains("Yes")')
  .css('background-color', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="orders">
  <thead>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>x</td>
      <td>x</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>2</td>
      <td>x</td>
      <td>x</td>
      <td>No</td>
    </tr>
    <tr>
      <td>1</td>
      <td>x</td>
      <td>x</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>2</td>
      <td>x</td>
      <td>x</td>
      <td>No</td>
    </tr>
  </tbody>
</table>

推荐阅读