javascript - 使用 jQuery 将颜色应用于 php for 循环中的 td 元素不起作用

Question

我有一个 php for 循环，如果该特定元素的值小于 3，我试图将所有具有 c 类的 td 元素设为黄色。但由于某种原因它不起作用

<?php
foreach($results as $data){

  echo '<tbody>
      <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c" >'.$data['criticality'].'</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
  </tr>

  </tbody>';}

我正在使用 jQuery 来实现这一点。

我的 jQuery 代码:

if (parseInt($(".c").text()) <= 3)
{
    $(".c").css("background-color" , "yellow");
}

Answer 1

您需要循环:

$(".c").each(function() {
  $(this).toggleClass("yellow",+$(this).text() <= 3);
});

或者如果您只有 3 个值:

$(".c:contains(3), .c:contains(2), .c:contains(1)").addClass("yellow")

或者在服务器上

<td class="c'.($data['criticality']<=3?" yellow":"").' >'.$data['criticality'].'</td>

我建议你将 tbody 移到循环之外

$(".c").each(function() {
  $(this).toggleClass("yellow", +$(this).text() <= 3);
});

.yellow {
  background-color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">4</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">3</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">5</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>

  </tbody>
</table>

:包含:

$(".c:contains(3), .c:contains(2), .c:contains(1)").addClass("yellow")

.yellow {
  background-color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">2</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">3</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">5</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>

  </tbody>
</table>