tableのtd要素にエクセルのセル番号のようなclassを設定するJavaScript

ここで「エクセルのセル番号」というのはつまり"A1"とか"AZ1"のような列と行を表す文字列のこと。

※「セル番号」よりももっと正式な名称があると思う。

Webサイト制作においては、tableを構成するすべてのセルに対してそれぞれCSSで柔軟にデザインを変えたいというケースが稀にある。そうした場合に手っ取り早いのは各セルにセル番号のような文字列をクラスとして設定してあげること。そして、css内で td.A1{ ...; } ... td.AZ1{ ...; } のようなスタイルを指定する。

小さいtableなら手動でやってもよいが、大きくなるとJavaScriptで動的に設定することになる。以下がそのためのJavaScriptの例。

<script type="text/javascript">
// jQuery等のライブラリ使わないコードです（仕事上、そういう前提だったので）
// 関数定義
function setClassToTd(){
  var alphas = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var tbls = document.getElementsByTagName('table');

  // html内のすべてのtable要素を処理する
  for(var i=0, n=tbls.length; i<n; i++){
    var trs = tbls[i].getElementsByTagName('tr');
    for(var j=0, m=trs.length; j<m; j++){
      var tds = trs[j].getElementsByTagName('td');
      for(var k=0, l=tds.length, cls; k<l; k++){
        if(k < alphas.length){
          cls = alphas.charAt(k);
        }else{
          cls = charAt(Math.floor(k / alphas.length) - 1) + charAt(k % alphas.length);
        }
        cls += j + 1;
        // 既存のclass設定を消さないように
        var clsbuf = tds[k].getAttribute('class')||tds[k].getAttribute('className');
        if(clsbuf){
          cls += ' ' + clsbuf;
        }
        tds[k].setAttribute('class', cls);
        tds[k].setAttribute('className', cls); //IE
      }
    }
  }
}
// loadイベントで実行 
if (window.attachEvent) { //IE
  window.attachEvent("onload", setClassToTd);
}else{
  window.addEventListener('load', setClassToTd, false);
}
</script>