1

3列のテーブルがあります：

  • field1 はカテゴリです
  • field2 と field3 はメジャー (正確には整数 1、2、3、4、および 5) を保持します。

Javascript を使用して、これらのメジャー (特にフィールド 2 とフィールド 3) を保持するテーブル内のセルの背景色を条件付きでフォーマットして、次の色に対応させるにはどうすればよいですか。

  • 1 のセルは赤
  • 2、3、および 4 のセルは青色
  • 5 のセルは緑

これが私がこれまでに持っているものです (今のところ、すべてを 1 つの 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>

アップデート：

コメントは削除された構文エラー (余分なセミコロン) を指摘し、上記のコードは正常に動作します。ただし、さらに良い回答が投稿され、受け入れられました。

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 の実装は確かに可能です。ここでは、jQuery ではなくプレーンな JavaScript を使用しています。

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 フィドルのデモ。

table最近追加した HTML を考えると、次のように上記を独自の HTML に適用できます。

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 に答える