Javascript 根据单元格值在3种不同背景颜色之间切换

我的Joomla上有一个预订页面！2.5访客可以注册参加活动的网站；这些事件有3种不同的状态： 少于20：初步（对注册人开放） 超过20个：已确认（仍对注册人开放） 60：全部（对注册人关闭）

我希望使用javascript（或css，如果可能的话）根据从注册人表中提取的值更改表单元格的背景颜色。我在这里发现了几个类似的问题，但到目前为止只有两个值：like

我已经在JSFIDLE dot net上克隆了最新的实时示例，并试图让它工作，但把它搞砸了，所以它无法工作。。。我甚至不确定，一旦它工作（“”），将它整合到相关组件中的最佳方式是什么，希望有人能为我指明正确的方向

---

无法发布链接/DaBouncer/DL6U2/185/]

如果我理解正确，您需要以下信息：

HTML:

jQuery：

var cell = $('td');

cell.each(function() {
var cell_value = $(this).html();
if ((cell_value >= 0) && (cell_value <=2)) {
    $(this).css({'background' : '#FF0000'});   
} else if ((cell_value >= 3) && (cell_value <=7)) {
    $(this).css({'background' : '#0066CC'});
} else if (cell_value >= 8) {
    $(this).css({'background' : '#00CC66'});
}
});

var cell=$（'td'）；
cell.each（函数（）{
var cell_value=$（this.html（）；
如果（（单元格数值>=0）&&（单元格数值=3）&&（单元格数值=8）{
$（this.css（{'background'：'#00CC66'}）；
}
});

以下是一个例子：

编辑 尝试创建一个script.js文件（在一个名为“js”的文件夹中），其中包含jquery代码，并在jquery之后、关闭选项卡之前、在“index.php”文件中加载该文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/script.js"></script>

---

如果您已经在使用PHP，那么在服务器端为相关元素添加一个类要比使用JavaScript有效得多。这看起来很好，谢谢。但是我想它需要用ID硬编码，这样就不会在包含此特定pag上数字的所有表单元格中呈现bg颜色e？类似于id=“bg\u status”的内容用于所讨论的表？我建议class=“bg\u status”而不是id，比如：。再次感谢Kapantzak。它完全符合我的要求，但不幸的是，我无法在Joomla！2.5.9中实现它。我尝试在模板头中加载jQuery，尝试通过插件自定义JavaScript和MetaMod以及jQuery轻松实现，但仍然没有成功。我尝试了在public_html/components/com_eventbooking/view中实现s/event/tmpl/default.php以及public_html/templates/jsn_pixel_pro/index.php的头部。我不认为public_html/index.php应该在Joomla中进行更改。您编辑的答案是什么意思？如果是这样，我尝试使用该代码。啊，很抱歉，我没有看到上面的编辑，我将查看（“”，）

var cell = $('td');

cell.each(function() {
var cell_value = $(this).html();
if ((cell_value >= 0) && (cell_value <=2)) {
    $(this).css({'background' : '#FF0000'});   
} else if ((cell_value >= 3) && (cell_value <=7)) {
    $(this).css({'background' : '#0066CC'});
} else if (cell_value >= 8) {
    $(this).css({'background' : '#00CC66'});
}
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/script.js"></script>