Question

我有一个包含3列的表格：

field1是一个类别
field2和field3保存Measures（确切地说是整数1,2,3,4和5）。

使用Javascript，我如何有条件地格式化包含这些度量的表格中单元格的背景颜色（特别是field2和field3）以符合以下颜色：

具有1的细胞是RED
具有2,3和4的细胞是蓝色的
具有5的细胞是绿色

这是我迄今为止所拥有的内容（目前它只在一个HTML文件中，只是在我将其整理出来的时候）并且我已将其分解以便于阅读。我想我可能完全错过了HTML中的background属性。我知道它可能，但不知道如何使用Javascript根据其内容动态更改表格单元格的背景颜色。

提前致谢。

开始编写脚本

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $( "#status_report td.measure:contains('1')" ).css('background-color', '#fcc' );
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table id="status_report">
<tr>
    <th>field1</th>
    <th>field2</th>
    <th>field3</th>
</tr>
<tr>
    <td class = "measure">Example</td>
    <td class = "measure">1</td>
    <td class = "measure">2</td>    
</tr>
</table>
</body>
</html>

更新

注释指出了一个语法错误（额外的分号）被删除，上面的代码工作正常。但是，有一个更好的答案发布并已被接受。

Answer 1

即使使用PHP也可以。为什么？因为JS是在客户端执行的，如果它被关闭，用户将看不到彩色单元格。

<?php 
$colors = array(
  1 => "red",
  2 => "blue",
  3 => "blue",
  4 => "blue"
  5 => "green"
) ;

foreach( $data as $row ) : ?>
<tr>
  <?php foreach($row as $num): ?>
    <td style="background-color: <?php echo (isset($colors[(int)$num]) ? $colors[(int)$num] : "white") ; ?>"><?php echo $num ; ?></td>
  <?php endforeach ; ?>
</tr>   
<? endforeach; ?>

您也可以使用td标签中的类而不是直线型。

如果您仍然需要JQuery的解决方案，我可以编辑我的答案。

Answer 2

虽然您已经接受了答案，但JavaScript实现当然是可行的，这里使用纯JavaScript而不是jQuery：

function formatCells(table){
    var tbody = table.getElementsByTagName('tbody')[0],
        cells = tbody.getElementsByTagName('td'),
        colors = ['red', 'blue', 'green'];
    for (var c = 0, len = cells.length; c < len; c++){
        if (cells[c].cellIndex > 0){
            switch (parseInt((cells[c].textContent || cells[c].innerText), 10)){
                case 1:
                    cells[c].style.backgroundColor = colors[0];
                    break;
                case 2:
                case 3:
                case 4:
                    cells[c].style.backgroundColor = colors[1];
                    break;
                case 5:
                    cells[c].style.backgroundColor = colors[2];
                    break;
            }
        }
    }
}

formatCells(document.getElementsByTagName('table')[0]);

JS Fiddle demo

鉴于您最近添加的HTML，您可以将上述内容应用于您自己的table，如下所示：

formatCells(document.getElementById('status_report'));

JS Fiddle demo

编辑提供一个理智的（可扩展的）jQuery解决方案，而不是为每个可能的替代方案提供单独的jQuery系列：

var colorMap = {
    1 : 'red',
    2 : 'blue',
    3 : 'blue',
    4 : 'blue',
    5 : 'green',
};

$('#status_report td').css('background-color', function(){
    return colorMap[$(this).text()] || '';
});

JS Fiddle demo

而且，仅仅因为我喜欢简单的JavaScript，我想我会通过扩展Object.prototype来提供如何实现相同最终结果的演示：

Object.prototype.propByTextValue = function(prop, obj){
    if (!obj){
        return this;
    }
    else {
        var that = this.length ? this : [this],
            txt = '';
        for (var i = 0, len = that.length; i < len; i++){
            that[i].style[prop] = obj[parseInt((that[i].textContent || that[i].innerText), 10)];
        }
    }
    return this;
};

var colorMap = {
    1 : 'red',
    2 : 'blue',
    3 : 'blue',
    4 : 'blue',
    5 : 'green',
};

document
.getElementById('status_report')
.getElementsByTagName('td')
.propByTextValue('background-color', colorMap);

JS Fiddle demo

Answer 3

向您的单元格添加数据属性：

<table id="status_report">
<tr>
    <th>fee_source_id</th>
    <th>field1</th>
    <th>field2</th>
    <th>field3</th>
</tr>

<?php foreach( $data as $row ) : ?>
<tr>
    <td data-bg="<?php echo $row['field1']; ?>"><?php echo $row['field1']; ?></td>
    <td data-bg="<?php echo $row['field2']; ?>"><?php echo $row['field2']; ?></td>
    <td data-bg="<?php echo $row['field3']; ?>"><?php echo $row['field3']; ?></td>  
</tr>

<? endforeach;
$dbh = null; ?>
</table>

和js：

$(document).ready(function(){
    $( "#status_report .measure[data-bg='1']").css('background', 'red');
    $( "#status_report .measure[data-bg='2']").css('background', 'blue');
    $( "#status_report .measure[data-bg='3']").css('background', 'blue');
    $( "#status_report .measure[data-bg='4']").css('background', 'blue');
    $( "#status_report .measure[data-bg='5']").css('background', 'green');
});

演示：http://jsfiddle.net/pUw6u/

如何使用javascript根据其值更改单元格的背景颜色？

开始编写脚本

更新

3 个答案: