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

Question

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

• field1 是一个类别
• field2 和 field3 保存度量值（确切地说是整数 1、2、3、4 和 5）。

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

• 单元格为 1 为红色
• 具有 2,3 和 4 的单元格为蓝色
• 5 个单元格为绿色

这是我目前所拥有的（现在全部在一个 HTML 文件中，就在我整理它的时候），为了便于阅读，我已经将它分解了。我想我可能完全错过了 HTML 中的背景属性。我知道这是可能的，但不确定如何使用 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/