読者です 読者をやめる 読者になる 読者になる

なぜか今日は

IT土方の生活。プログラミングとか趣味のこととか。

テーブル行を動的に追加する時のstyle属性への記述について

WEBプログラムで入力フォームのテーブル行をボタンクリックで動的に追加したい時、Javascriptによるクライアントサイドの処理でstyle属性を追加する場合のメモ。

例えばテーブルに行追加するだけならこんな記述。

var table = document.getElementById("tableId"); // ①IDがtableIdの要素を返却

var row = table.insertRow(1);    // ②行を追加

var cell = row.insertCell(0);    // ③セルを追加

// ④セルにstyle属性を追加

// 反映されない記述

//cell.setAttribute("style","color:#000000;");

// 反映される記述

cell.style.cssText = 'color:#000000;';

セルにstyle属性を追加したい場合、記述はsetAttributeでなくstyle.cssTextを使用しないと上手く属性が追加されないっぽい。*1

余談で、たまに1つのセルにsetAttributeを何行も書いてstyle属性に要素を追加しまくってるコードを見るけど、*2同じの属性を対象とした場合は最後の記述しか反映されなかった、はず。複数追加したい場合はsetAttributeの第2引数にセミコロンで区切って要素を追加する。

改訂第5版 JavaScript ポケットリファレンス

改訂第5版 JavaScript ポケットリファレンス

 

*1:ASP.NET、ブラウザがIE11の場合で確認

*2:社内システムのバグでこのケースを最近よく見かける…