【Javascript】colspan、rowspanをJavascriptでセットするとき

Tweet

Category JavaScript 2009/12/30

テーブル（table）要素をjavascriptで動的に生成、操作するとき、colspan、rowspanをセットするときは、属性名をcolSpan、rowSpanで指定する。全部小文字で大丈夫な場合もあるが、現時点では素直にcolSpan、rowSpanと、Sを大文字で書くのがよさそう。

以下の説明で、変数 td や ID #xxxx は適当なTD要素とする。

基本は col”S”pan と大文字にする

//直に
td.colSpan = "3"
//DOM関数で
td.setAttribute("colSpan", "3")
//jQueryで
$("#xxxx").attr("colSpan","3")

今風の書き方 + 最近のブラウザ（Firefox、IE8、Chromeなど）の組み合わせなら、小文字でも大丈夫だった

古いブラウザ（IE7など）はダメ。

//DOM関数で
td.setAttribute("colspan", "3")
//jQueryで
$("#xxxx").attr("colspan","3")

最近のブラウザ（Firefox、IE8、Chromeなど）でも、この書き方だと小文字ではダメ

古いブラウザ（IE7など）も同じくダメ。

td.colspan = "3"

colspan、rowspanでうまくいく環境はあるけど、どのように書いても大丈夫なのは、colSpan、rowSpanと、Sを大文字で書いたとき。

他にも

readOnly属性やmaxLength属性などでも要注意。こちらはこちらで、同じようで同じでないような感じです。