【JavaScript】テーブルのセルの色の変更

Webページのテーブルにおいて、フォントカラーや背景色、枠線の色の変更はどのように行うのでしょうか。静的にはCSSを用いて設定できますね。ただ、ユーザの入力内容や属性に応じて動的に変更したい場合もありますね。そのような場合は、JavaScriptを用いて変更することが出来ます。

1. フォントカラーの変更
2. 背景色の変更
3. 枠線の色の変更

スポンサードリンク

1. フォントカラーの変更

// 行の取得

var row = document.getElementById("tableId").rows.item(0);

// セルの取得

var cell = row.cells.item(-1);

// フォントカラーの変更

cell.style.color = "white";

　　　　セルのフォントカラーを変更する場合は、上記の例のようにstyle.colorに色を設定します。
　　　　色には"white"のようにカラー名も使用できますし、"#FFFFFF"のような
　　　　16進カラーコードも使用できます。
　　　　ちなみに、CSSではフォントカラーはcolor: #FFFFFF; のように設定します。


2. 背景色の変更

// 行の取得

var row = document.getElementById("tableId").rows.item(0);

// セルの取得

var cell = row.cells.item(-1);

// 背景色の変更

cell.style.backgroundColor = "#A52A2A";

　　　　セルの背景色を変更する場合は、上記の例のようにstyle.backgroundColorに
　　　　色を設定します。
　　　　色には"brown"のようにカラー名も使用できますし、"#A52A2A"のような
　　　　16進カラーコードも使用できます。
　　　　ちなみに、CSSでは背景色はbackground-color: #A52A2A; のように設定します。

3. 枠線の色の変更

// 行の取得

var row = document.getElementById("tableId").rows.item(0);

// セルの取得

var cell = row.cells.item(-1);

// 枠線の色の変更

cell.style.borderColor = "#C71585";

　　　　セルの枠線の色を変更する場合は、上記の例のようにstyle.borderColorに色を設定します。
　　　　色には"MediumVioletRed"のようにカラー名も使用できますし、"#C71585"のような
　　　　16進カラーコードも使用できます。
　　　　ちなみに、CSSでは枠線の色はborder-color: #C71585; のように設定します。



【⇒】　関連記事

テーブルに関する操作については、下記に目次を作成しました。こちらも合わせてご参照ください。
【JavaScript】テーブルの操作の方法

スポンサードリンク

タグ：JavaScript テーブル 色 背景色 フォントカラー 枠線の色 ボーダーカラー 変更