使用 php 和 js 更改表格单元格中文本的颜色

Question

我有一个表格，我希望日子在某些里程碑时改变颜色。 我有 JS，但它只适用于第一个单元格，而不适用于其他单元格。任何想法如何循环 js 以更改表中每个名为 DAYS 的单元格？

我已将 ID 放在表中，但可能是错误的。

$(function () {
    // Score Color
    var score = parseInt($('#DAYS').text().trim());
    var color = 'red';
    if (!isNaN(score)) {
        if (score >= 40) {
            color = 'orange';
        }
        if (score >= 60) {
            color = 'green';
        }
        $('#DAYS').css('color', color);
    }
});

PHP table: 
echo"<td id=DAYS>".$applicant_card['DAYS']."</td>";

Answer 1

正如 DrRoach 所说，如果我们针对多个项目，我们应该使用 class 而不是 id。因为id 总是只指向一个唯一元素。

因此，您可以将class 指定为DAYS 而不是id，并使用each() 遍历每个元素以赋予它们相应的颜色。

示例代码

$(function () {
   $('.DAYS').each(function(){
    var score = parseInt($(this).text().trim());
    var color = 'red';
    if (!isNaN(score)) {
        if (score >= 40) {
            color = 'orange';
        }
        if (score >= 60) {
            color = 'green';
        }
        $(this).css('color', color);
    }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
PHP table: 
<table>
<tr><td class=DAYS>34</td></tr>
<tr><td class=DAYS>44</td></tr>
<tr><td class=DAYS>74</td></tr>
<tr><td class=DAYS>23</td></tr>
<tr><td class=DAYS>54</td></tr>
</table>

Answer 2

只要用“”改变

PHP table: echo"<td id="DAYS">".$applicant_card['DAYS']."</td>";

就是这样

Answer 3

您可以将 echo 中的 id=DAYS 更改为 class=DAYS。 id 只能引用一个 DOM 元素，而类可以引用多个。

$(".DAYS").each(function() {
  var score = parseInt($(this).text().trim());
  var color = 'red';
  if (!isNaN(score)) {
    if (score >= 40) {
        color = 'orange';
    }
    if (score >= 60) {
        color = 'green';
    }
    $(this).css('color', color);
  }
});