jQuery を用いた HTML テーブルのセルの色分けについて

###前提・実現したいこと

jQuery, JavaScript, HTML に関する質問です。

HTML 内に同じ class 名「heat-map」を持つ複数のテーブルを配置し、それぞれの td タグの value 属性に整数の数値を持たせます。
上記テーブルは、class名「table-content」のセクションの入れ子になっています。
各テーブルのセルについて、それぞれのテーブルの最大値を基準として割合を求め、濃淡で色分けしたいと考えております。

###発生している問題・エラーメッセージ

上記の濃淡色分けは javascript で実装しています。
しかし、作成した js を実行すると「全てのテーブルから最大値を取得」して濃淡を色分けしてしまいます。

###該当のソースコード

js
1
2
3$(".table-content").each(function() {
4
5    // 配列内の最大値を取得する関数
6    Array.max = function(array) {
7        return Math.max.apply(Math, array);
8    };
9
10    // すべての値を取得
11    var counts = $('.heat-map tbody td').not('.stats-title').map(function() {
12    //var counts = $('.heat-map:first-child tbody td').not('.stats-title').map(function() {
13        return parseInt($(this).attr('value'));
14    }).get();
15
16    // 最大値を返す
17    var max = Array.max(counts);
18
19    // 色を指定する
20    xr = 255;
21    xg = 255;
22    xb = 255;
23
24    //yr = 78;
25    yr = 158;
26    yg = 204;
27    yb = 243;
28
29    n = 100;
30
31    // 各データポイントをループして、その％の値を計算する
32    $('.heat-map tbody td').not('.stats-title').each(function() {
33    //$('.heat-map:first-child tbody td').not('.stats-title').each(function() {
34        var val = parseInt($(this).attr('value'));
35        var val_zero = parseInt('0');
36
37        var pos = parseInt((Math.round((val / max) * 100)).toFixed(0));
38        red = parseInt((xr + ((pos * (yr - xr)) / (n - 1))).toFixed(0));
39        green = parseInt((xg + ((pos * (yg - xg)) / (n - 1))).toFixed(0));
40        blue = parseInt((xb + ((pos * (yb - xb)) / (n - 1))).toFixed(0));
41
42        clr = 'rgb(' + red + ',' + green + ',' + blue + ')';
43        $(this).css({
44            backgroundColor: clr
45        });
46
47    });
48
49});
50
51

css
1
2#heat-map-3{margin-top:15px;}
3.heat-map {border: 1px solid #ccc; margin: 0 auto 20px auto; width: 50%}
4
5.heat-map tr th {padding: 5px 5px; min-width:5px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; border-left: 1px solid #fff; text-shadow: 0 1px 0 #fff; font: bold 11px Arial, sans-serif; text-transform: uppercase; color: #000;
6
7background-color: #F1F1F1;
8
9    background-image: -moz-linear-gradient(center top , #F9F9F9, #ECECEC);
10
11}
12
13.heat-map tr th.last {border-right: none;}
14
15.heat-map tr th.first, .heat-map tr td.stats-title {border-left: none; text-align: left;}
16
17.heat-map tr td {padding: 5px 5px; min-width:5px;  /*border-top: 1px solid #fff; border-right: 1px solid #fff; */ border-right: 1px solid #fff;border-bottom: 1px solid #fff;text-align right; color: #000; font-size: 11px;}
18
19tr.stats-row {text-align: right;}
20
21.heat-map tr.stats-row td.stats-title {text-align: left; color: #111; font-size: 13px; text-shadow: 0 1px 0 #fff; background: #efefef; border-top: 1px solid #fff; border-bottom: 1px solid #ccc;  border-right: 1px solid #ccc; border : 1px solid #cccccc;}
22
23.heat-map tr.stats-row td.stats-title.last {border-bottom: 1px solid #fff;}
24

html
1
2<!DOCTYPE html> 
3<html> 
4<head> 
5<meta charset='utf-8'> 
6<link href="ct.css" rel="stylesheet" type="text/css"/> 
7</head> 
8
9<body> 
10
11<div id='table1'>
12
13<section class='table-content'> 
14
15<table cellpadding="0" cellspacing="0" border="0" class="heat-map" align="left">
16
17<thead>
18
19<tr>
20  <th class="first"></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
21</tr>
22
23</thead>
24
25<tbody>
26<tr class="stats-row"><td class="stats-title">a</td><td value='0'></td><td value='0'></td><td value='331'></td><td value='574'></td><td value='821'></td><td value='961'><td value='1191'></td><td value='1494'></td><td value='3314'></td><td value='3451'></td><td value='2292'></td><td value='1493'></tr>
27<tr class="stats-row"><td class="stats-title">b</td><td value='1262'></td><td value='1588'></td><td value='1602'></td><td value='2309'></td><td value='2582'></td><td value='2674'><td value='3025'></td><td value='2397'></td><td value='2264'></td><td value='3389'></td><td value='3043'></td><td value='2018'></tr>
28<tr class="stats-row"><td class="stats-title">c</td><td value='1688'></td><td value='1519'></td><td value='1647'></td><td value='2067'></td><td value='2757'></td><td value='2625'><td value='3250'></td><td value='2773'></td><td value='2579'></td><td value='3198'></td><td value='2740'></td><td value='2282'></tr>
29
30</tbody>
31</table>
32
33
34</dl> 
35</section> 
36
37</div>
38
39<div id='table1'>
40
41<section class='table-content'> 
42
43<table cellpadding="0" cellspacing="0" border="0" class="heat-map" align="left">
44
45<thead>
46
47<tr>
48  <th class="first"></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
49</tr>
50
51<tbody>
52
53<tr class="stats-row">
54    <td class="stats-title">1</td>
55    <td value='1'></td><td value='55'></td><td value='24'></td><td value='19'></td><td value='39'></td><td value='21'><td value='1'></td><td value='55'></td><td value='24'></td><td value='19'></td><td value='39'></td><td value='21'>
56</tr>
57<tr class="stats-row">
58    <td class="stats-title">2</td>
59    <td value='0'></td><td value='0'></td><td value='24'></td><td value='19'></td><td value='39'></td><td value='21'><td value='1'></td><td value='55'></td><td value='24'></td><td value='19'></td><td value='39'></td><td value='21'>
60</tr>
61<tr class="stats-row">
62    <td class="stats-title">3</td>
63    <td value='1'></td><td value='55'></td><td value='24'></td><td value='19'></td><td value='39'></td><td value='21'><td value='1'></td><td value='55'></td><td value='24'></td><td value='19'></td><td value='39'></td><td value='21'>
64
65</tr>
66
67    </tbody>
68</table>
69
70</section> 
71
72</div>
73
74<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
75<script src="ct.js" type="text/javascript"></script> 
76
77
78
79</body> 
80
81</html>
82

###試したこと

js 内で、セクション「.table-content」直下のテーブルのidを取るため、「.heat-map:first-child」を指定してみましたがうまく行きませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)

jQuery-1.11.0.min.js を利用しています。

以上、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

var counts = $('.heat-map tbody td').not('.stats-title').map(function() {
上記行で自分の子要素ではなく、全てのheat-mapクラスのものを起点にしている事が原因とみました。

http://dqn.sakusakutto.jp/2012/05/jquery_each_call.html
上記サイトのやり方を見習って、このように書き換えて見ると進むんじゃないでしょうか？
var counts = $(this).find('.heat-map tbody td').not('.stats-title').map(function() {

投稿2016/12/28 03:28