【JavaScript】テーブルのセルの操作 [JavaScript]
Webアプリを作成する際に、テーブルを操作することがありますね。今回は、テーブルのセルの操作について勉強したので、まとめました。セルとは、HTMLでは<TD>タグで表わされるものです。
スポンサードリンク
1. セルの追加
・末尾(一番右)にセルを追加する
末尾にセルを追加する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。
・任意の場所にセルを追加する
任意の場所にセルを追加する場合は、上記の例のように引数に列数を指定して、
関数を呼び出します。
上記の例では、引数に'2'を指定しているので、2列目と3列目の間に新しいセルが挿入されます。
引数に0を指定すれば、先頭列に新しいセルが挿入されます。
2. セルの削除
・末尾(一番右)のセルを削除する
末尾のセルを削除する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。
・任意の場所にセルを削除する
任意の場所のセルを削除する場合は、上記の例のように引数に行数を指定して、
関数を呼び出します。
上記の例では、引数に'2'を指定しているので、3列目が削除されます。
(1列目は0であることに注意)
引数に0を指定すれば、先頭のセルが削除されます。
・全てのセルを削除する(一括削除)
3. セルの取得
・末尾(一番右)のセルを取得する
末尾のセルを取得する場合は、上記の例のように引数に'-1'を与えて、関数を呼び出します。
・任意の場所のセルを取得する
任意の場所のセルを取得する場合は、上記の例のように引数に列数を指定して、
関数を呼び出します。
上記の例では、引数に'2'を指定しているので、3列目のセルが取得されます。
引数に0を指定すれば、先頭列のセルが取得できます。
【⇒】 関連記事
テーブルに関する操作については、下記に目次を作成しました。こちらも合わせてご参照ください。
【JavaScript】テーブルの操作の方法
スポンサードリンク
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】テーブルの操作の方法
スポンサードリンク
コメント 0