月別アーカイブ: 2011年3月

tableにスタイル用のfirst-childを適用するJS


tableにfirst-child疑似クラスを適用すると、
rowspanを使っているセルで左端じゃないのにfirst-childが効いてしまい、
スタイルが効いてしまう場合がある。

そこで左端のセルだけにスタイルを効かせられるように、
first-childという(疑似クラスではない通常の)クラスを付与するjavascriptを作ってみた。

▼デモ
https://w-x-w.com/demo/demo001.html

<script type="text/javascript">
var tr = document.getElementsByTagName("tr");
var row = 0;
for(var i=0;i<tr.length;i++){
// 空ノードを削除
tr[i].innerHTML = tr[i].innerHTML.replace(/r|n/g, "");
var cell = tr[i].childNodes[0];
var c = "";
// 既存のクラスがあったら保持
if(cell.className != ""){
c = cell.className + " ";
}
// first-childを付与
if(row < 1){
cell.className = c + "first-child";
// rowspanがあったら、残りのrowspan数を設定
if(parseInt(cell.rowSpan) > 1){
row = parseInt(cell.rowSpan);
}
}
// last-childを付与
var last = tr[i].lastChild;
last.className = c + "last-child";
// 残りのrowspan数を減らす
row--;
}
</script>

ついでにlast-childも付与して、IE6でもスタイルが付けられるようにしてみた。