1

我有一个包含 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>

更新：

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

4

3 回答 3

4

你甚至可以用 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，我可以编辑我的答案。

于 2013-04-05T08:01:16.430 回答
3

虽然您已经接受了答案，但 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 小提琴演示。

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

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

JS 小提琴演示。

编辑以提供一个健全的（和可扩展的）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 小提琴演示。

而且，仅仅因为我喜欢纯 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 小提琴演示。

于 2013-04-05T08:10:17.743 回答
2

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

<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/

于 2013-04-05T08:14:07.650 回答