根据单元格值在3种不同背景颜色之间切换 [英] change between 3 different background color based on cell value

问题描述

我的Joomla上有一个预订页面！ 2.5访客可以注册活动的网站；这些事件具有3种不同的状态: 少于20:初步(向注册人开放) 超过20:已确认(仍对注册人开放) 60:满(对注册人不开放)

I have a booking page on my Joomla! 2.5 website where visitors can sign up for events; these events have 3 different statuses : less than 20: preliminary (open for registrants) more than 20: confirmed (still open for registrants) 60: full (closed for registrants)

我希望基于从注册人表格中提取的值，使用JavaScript(如果可能的话，也可以使用CSS)来更改表格单元格的背景颜色.我在这里发现了几个类似的问题，但到目前为止只有两个值:像

I'm hoping to use javascript (or just css if possible) to change the background-color of a table cell based on the value pulled from the registrants-table. I have found several similar questions asked here, but so far only with two values: like this one.

我已经在jsfiddle点网络上克隆了最新的在线示例，并试图使其工作，但将其弄乱了，以致于它无法工作...我什至不知道将其合并到组件中的最佳方法问题一旦起作用就可以了(''，)希望有人可以将我指向正确的方向?

I have cloned latest live example at jsfiddle dot net and tried to make it work, but have messed it up so that it does not work... I'm not even sure what the best way to incorporate it into the component in question once it does work ('',) Hoping there are someone that can point me in the right direction?

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

unable to post link /DaBouncer/DL6U2/185/]

推荐答案

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

If I understood correct you want the following:

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/

尝试在其中创建带有jquery代码的script.js文件(位于名为"js"的文件夹中)，并在jquery之后，紧接选项卡之前，将其加载到"index.php"文件中:

Try creating a script.js file (in a folder called 'js') with the jquery code in it and load it after jquery, right before the closing tab, in 'index.php' file:

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

也许可行

这篇关于根据单元格值在3种不同背景颜色之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！