tableタグのtdタグのクラス名が同じの時に特定の列の背景色を変える方法
業務でHTML、JavaScript、Perlを使っていた時に一つ問題が起きました。
HTMLのテーブルで一つの列のみの背景色をある条件を満たすと黄色に染めるというものでした。
普通にコードを書くと簡単ですが、その時のtdタグのクラス名は同じクラス名にしなければなりませんでした。例えば以下のような感じです。
HTML側
途中省略
<td class="td_class"><input type="hidden" name="count" value="--COUNT--">--COUNT--</td>
<td class="td_class"><input type="hidden" name="check" value="--CHECK--">--CHECK--</td>
<td class="td_class"><input type="hidden" name="about" value="--ABOUT--">--ABOUT--</td>
大文字で記述しているところはPerlでCGIを実現して、DBから引っ張ってきたデータを入れています。それはさておきtdタグのクラスが上記のように全く同じ状態でname=countの列で5以上の数字を持っている箇所のみ背景色を黄色にしなければなりませんでした。
name=countのところをgetElementsByName('count')で対応しようと思いましたが、文字の周りが黄色く変わるだけで背景色全体が変化しませんでした。
なのでJavaScriptで以下のように書きました。
function checkCount(){
var count = document.getElementsByName('count');
var msgFlg = false;
var counter = 0;
var changeInt = "";
for(var i = 0; i < count.length; i++){
var parentEle = count[i].parentNode;
if(count[i].value){
changeInt = parseInt(count[i].value, 10);
} else {
continue;
}
if(changeInt > 4){
msgFlg = true;
parentEle.className = parentEle.className + "_target";
parentEle.style.backgroundColor = "#ffff00";
parentEle.style.fontSize = "x-small";
counter++;
}
}
if(msgFlg == true){
alert(counter + "人");
}
}
まず背景色を変えたい列のクラスを取得します。そしてDBに存在する分だけデータをHTMLで表示するのでその件数分をfor文でまわしていきます。
parentNodeのところですがここがポイントの一つです。countクラスの列を取得した後にその要素の親クラスを特定していきます。上記ではtd_classになるわけですが、countクラスを先に取得したので同じtd_classという名前でもcountクラスのtd_classを指していることになります。
changeInt = parseIntの箇所はvalueに存在する値は文字列なので数字に変換するためにあります。
そして数字が4より大きければ背景色を黄色にしたいのですが、countクラスのtd_classに限定しても条件を満たさなくても黄色に染まってしまうので、クラス名を少し変えてあげます。
それがparentEle.className = parentEle.className + "_target";の部分で数字が4より大きい箇所のtd_class名に_targetを加えてtd_class_targetという名前にしてあげます。
こうすると条件を満たしたところのみの背景色が黄色に変化します。
最後にcounter++で背景色が黄色になったのはいくつか数えていき、alertで何人いるかを出していきます。
これがお役にたてれば幸いです。