セルの取得

table=document.getElementById('id') // tableの取得
table.rows // 行の一覧
table.rows.length // 行数の取得
table.rows[行番号] // 行の取得
table.rows[行番号].cells // 行に含まれるセルの一覧
table.rows[行番号].cells.length //行に含まれるセルの個数
table.rows[行番号].cells[列番号] //セルの取得
以下のボタンをクリックするとセルの値を取得し下に表示します。
tableオブジェクト(HTMLTableElement)のrowsプロパティで行の一覧(HTMLCollection)を取得できます。
行数はrowsのlengthプロパティで取得できます。
各行はrows[行番号](HTMLTableRowElement)でアクセスできます。
セルはrows[行番号].cellsで行に含まれるセルの一覧(HTMLCollection)を取得できます。
列数はcellsのlengthプロパティで取得できます。
各セルはcells[列番号](HTMLTable​Cell​Element)で取得できます。
セル(HTMLTable​Cell​Element)の値はinnerTextで取得変更できます。
セルの指定を一括して記述するとtable.rows[行番号].cells[列番号]となります。
style.backgroundColorによりセルの背景色を変更しています。
789
456
123

行・セルの追加・削除

table.insertRows(行番号) // 行の挿入
row.insertCell(列番号) // セルの挿入
table.deleteRow(行番号) // 行の削除
row.deleteCell(列番号) // セルの削除
行の追加ボタンをクリックすると一番下に1行追加します。
列の追加ボタンをクリックすると一番右の横に列を追加します。
行の削除ボタンをクリックすると一番下の行を削除します。
列の削除ボタンをクリックすると一番右の横の列を削除します。
列の結合ボタンをクリックすると一番左上のセルと右のセルを結合します。
行の追加はtableオブジェクトのinsertRows(行番号)で追加できます。行番号に-1を指定すると最後尾に行が追加されます。
セルの追加は行のオブジェクトに対してinsertCell(列番号)で追加できます。列番号に-1を追加すると最後尾にセルが追加されます。 行の削除はtableオブジェクトのdeleteRow(行番号)で削除できます。
セルの削除は行のオブジェクトに対してdeleteCell(列番号)で削除できます。列番号に-1を指定すると一番右のセルが削除されます。 セルの結合はdeleteCellで1列目のセルを削除してからcolsSpanに2を指定して結合しています。
123
234
345

表のセルにカーソルがのると行列番号及びセルの内容を表示する

td要素にonmouseoverイベントに関数を登録することによりセルの上にカーソルがのると行列番号及びセルの内容を表の上に表示します。
行番号は、セルの親がtr要素なのでtr要素のrowIndexプロパティで取得できます。
列番号は、セルのcellIndexプロパティで取得できます。
セルの中身はinnerTextプロパティで取得できます。
イベントの登録はイベントの追加ボタンをクリックすることにより登録されます。
inputtablespan
divinnerHTMLinnerText
onmouseoverrowscells