So-net無料ブログ作成
JavaScript ブログトップ

【JavaScript】テーブルのセルの色の変更 [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】テーブルのセルの操作 [JavaScript]

Webアプリを作成する際に、テーブルを操作することがありますね。今回は、テーブルのセルの操作について勉強したので、まとめました。セルとは、HTMLでは<TD>タグで表わされるものです。

1. セルの追加
2. セルの削除
3. セルの取得



スポンサードリンク



1. セルの追加

 ・末尾(一番右)にセルを追加する

// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの追加
var cell = row.insertCell(-1);


    末尾にセルを追加する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。


 ・任意の場所にセルを追加する

// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの追加
var cell = row.insertCell(2);


    任意の場所にセルを追加する場合は、上記の例のように引数に列数を指定して、
    関数を呼び出します。
    上記の例では、引数に'2'を指定しているので、2列目と3列目の間に新しいセルが挿入されます。
    引数に0を指定すれば、先頭列に新しいセルが挿入されます。




2. セルの削除

 ・末尾(一番右)のセルを削除する
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの削除
row.deleteCell(-1);

    末尾のセルを削除する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。


 ・任意の場所にセルを削除する
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの削除
row.deleteCell(2);

    任意の場所のセルを削除する場合は、上記の例のように引数に行数を指定して、
    関数を呼び出します。
    上記の例では、引数に'2'を指定しているので、3列目が削除されます。
      (1列目は0であることに注意)
    引数に0を指定すれば、先頭のセルが削除されます。


 ・全てのセルを削除する(一括削除)
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの削除
while (row.cells.length > 0) row.deleteCell(0);


3. セルの取得

 ・末尾(一番右)のセルを取得する
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの取得
var cell = row.cells.item(-1);

    末尾のセルを取得する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。


 ・任意の場所のセルを取得する
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの取得
var cell = row.cells.item(2);

    任意の場所のセルを取得する場合は、上記の例のように引数に列数を指定して、
    関数を呼び出します。
    上記の例では、引数に'2'を指定しているので、3列目のセルが取得されます。
    引数に0を指定すれば、先頭列のセルが取得できます。



【⇒】 関連記事

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


スポンサードリンク


【JavaScript】テーブルの操作の方法 [JavaScript]

Webアプリを作成する際に、テーブルを操作することがありますね。テーブルに関する操作について、まとめました。

1. テーブルの行の操作
2. テーブルの列の操作
3. テーブルのセルの操作
4. テーブルのセルの色の変更



スポンサードリンク


【JavaScript】テーブルの列の操作 [JavaScript]

Webアプリを作成する際に、テーブルを操作することがありますね。今回は、テーブルの列の操作について勉強したので、まとめました。

1. 列数の取得



スポンサードリンク



1. 列数の取得

 テーブルの列数を取得する場合は、下記のように記述します。
var tableObj = document.getElementById("tableId"); // テーブルの取得
var row = tableObj.rows[0]; // 1行目の行の取得
var length = row.cells.length; // 列数




【⇒】 関連記事

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




スポンサードリンク


【JavaScript】テーブルの行の操作 [JavaScript]

Webアプリを作成する際に、テーブルを操作することがありますね。今回は、テーブルの行の操作について勉強したので、まとめました。行とは、HTMLでは<TR>タグで表わされるものです。

1. 行の追加
2. 行の削除
3. 行数の取得
4. 行の取得



スポンサードリンク



1. 行の追加

 ・末尾(一番下)に行を追加する

var row = document.getElementById("tableId").insertRow(-1);


    末尾に行を追加する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。


 ・任意の場所に行を追加する

var row = document.getElementById("tableId").insertRow(2);


    任意の場所に行を追加する場合は、上記の例のように引数に行数を指定して、
    関数を呼び出します。
    上記の例では、引数に'2'を指定しているので、2行目と3行目の間に新しい行が挿入されます。
    引数に0を指定すれば、先頭行に新しい行が挿入されます。



2. 行の削除

 ・末尾(一番下)の行を削除する
document.getElementById("tableId").deleteRow(-1);

    末尾の行を削除する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。


 ・任意の場所に行を削除する
document.getElementById("tableId").deleteRow(2);

    任意の場所の行を削除する場合は、上記の例のように引数に行数を指定して、
    関数を呼び出します。
    上記の例では、引数に'2'を指定しているので、3行目が削除されます。
      (1行目は0であることに注意)
    引数に0を指定すれば、先頭行が削除されます。


 ・全ての行を削除する(一括削除)
// テーブルの取得
var table = document.getElementById("tableId");
// 行の削除
while (table.rows.length > 0) table.deleteRow(0);




3. 行数の取得

 テーブルの行数を取得する場合は、下記のように関数を呼び出します。
var length = document.getElementById("tableId").rows.length;



4. 行の取得

 ・末尾(一番下)の行を取得する
var row = document.getElementById("tableId").rows.item(-1);

    末尾の行を取得する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。


 ・任意の場所の行を取得する
var row = document.getElementById("tableId").rows.item(2);

    任意の場所の行を取得する場合は、上記の例のように引数に行数を指定して、
    関数を呼び出します。
    上記の例では、引数に'2'を指定しているので、3行目が取得されます。
    引数に0を指定すれば、先頭行が取得できます。



【⇒】 関連記事

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


スポンサードリンク


JavaScript ブログトップ