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

Question

我的 Joomla! 上有一个预订页面! 2.5 访问者可以注册事件的网站；这些事件有 3 种不同的状态:20人以下:初选(开放报名)超过20个:已确认(仍对注册人开放)60: 已满(对注册人关闭)

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

我已经在 jsfiddle dot net 上克隆了最新的实时示例并试图让它工作，但是把它搞砸了以至于它不起作用......我什至不确定将它合并到组件中的最佳方法是什么有问题一旦它确实有效 ('',) 希望有人能给我指出正确的方向？

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

Answer 1

如果我理解正确，您需要以下内容:

HTML:

<table border="1">
<tr>
    <td>1</td>
    <td>4</td>
    <td>12</td>
</tr>
</table>

CSS:

table td {
    padding: 5px 30px;
}

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'});
}
});

这是一个例子:http://jsfiddle.net/4Yp95/

编辑

尝试创建一个 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>

也许有用