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