[JavaScript] テーブルへの列/セルの追加/削除 – 端くれプログラマの備忘録

var table = document.getElementById("id");

// table.rows[0...].cells[0...]    //列やセルは配列アクセス可能

// 列追加
var row = table.insertRow(-1);     //インデックス指定、-1で末尾に追加
var numRows = table.rows.length;   //列数取得

// セル追加
var col1 = row.insertCell(-1);     //インデックス指定、-1で末尾に追加
col1.innerHTML = "Cell1";
var col2 = row.insertCell(-1);
col2.innerHTML = "Cell2";
var col3 = row.insertCell(-1);
col3.innerHTML = "Cell3";
var numCols = row.cells.length;     //セル数取得

// セル削除
row.deleteCell(-1);     //インデックス指定、-1で末尾を削除

// 列削除
table.deleteRow(-1);    //インデックス指定、-1で末尾を削除

var table = document.getElementById("id");

// table.rows[0...].cells[0...] //列やセルは配列アクセス可能

// 列追加

var row = table.insertRow(-1); //インデックス指定、-1で末尾に追加

var numRows = table.rows.length; //列数取得

// セル追加

var col1 = row.insertCell(-1); //インデックス指定、-1で末尾に追加

col1.innerHTML = "Cell1";

var col2 = row.insertCell(-1);

col2.innerHTML = "Cell2";

var col3 = row.insertCell(-1);

col3.innerHTML = "Cell3";

var numCols = row.cells.length; //セル数取得

// セル削除

row.deleteCell(-1); //インデックス指定、-1で末尾を削除

// 列削除

table.deleteRow(-1); //インデックス指定、-1で末尾を削除

参考サイト

HTML DOM Table Object
http://www.w3schools.com/jsref/dom_obj_table.asp

参考サイト

関連記事