TABLEタグの内容をアクセスしたい
前回までの実装で、TABLEタグと関連タグを作り出すクラスを実装できた。
いわば、初期表示ができたことになる。
普通は、表形式UIを作成した後、ユーザー操作による値を取り出したり更新したりすると思う。
そのためのメソッドをクラスへ追加しようと思った。
DOMのAPIを利用する
TABLEタグの値参照や更新は、DOMのAPIを利用するとできるらしい。
タグは、それぞれ用意されたElementを利用して用意されたプロパティ・メソッドを操作する。
例えば、
| タグ | Element |
|---|---|
| TABLE | HTMLTableElement |
| TR | HTMLTableRowElement |
| TD | HTMLTableCellElement |
これ以外にも、行コレクション、セルコレクションがある。
| コレクション | HTMLCollectionOf<T> |
|---|---|
| TR | HTMLCollectionOf<HTMLTableRowElement> |
| TD | HTMLCollectionOf<HTMLTableCellElement> |
要するに、対象の HTMLTableRowElementとHTMLTableCellElementを特定したあと、内包するElementへアクセスすれば、値の参照や更新ができる。
HTMLTableElement を特定する
HTMLTableElementを特定（検索）するには、以前利用した「document.querySelectorAll」や「document.getElementById」を利用すると特定（検索）できる。
「document.querySelectorAll」を利用する場合は、こんな感じ。
const tableName = `.[TABLEタグのクラス名]`
const tableList = document.querySelectorAll(tableName)
結果は「NodeListOf<Element>」（配列）が返ってくる。
必ず検索が成功する前提でよければ、最初の配列要素をキャストできる。
const tableElem = tableList[0] as HTMLTableElement
HTMLTableRowElement/HTMLTableCellElement を特定する
HTMLTableRowElementを特定（検索）するには、HTMLTableElementのrowsプロパティを元に特定する。要するに配列イメージでループするのが手っ取り早い。
同じような感じで、HTMLTableRowElementのcellsプロパティを利用する。
for (const rowElem of table.rows) {
//rowElemをHTMLTableRowElementとして扱う
for (const cell of rowElem.cells) {
//cellをHTMLTableCellElementとして扱う
}
}
セルは複数のタグ（Element）を保持できるので、実際の値が入っている要素へのアクセスはHTMLTableCellElementのchildrenプロパティを扱う。
for (const child of cell.children) {
//INPUTタグなら、
const input = child as HTMLInputElement
//SELECTタグなら、
const sel = child as HTMLSelectElement
}
ちなみに、childの要素の型（タイプ）を知りたい場合「instanceof」演算子を使う。
if (child instanceof HTMLInputElement) {
const input = child as HTMLInputElement
//input.valueが要素の値
}
else if (child instanceof HTMLSelectElement) {
const sel = child as HTMLSelectElement
//sel.valueが要素の値
}
次は、クリップボード連携
せっかくTABLEタグへのアクセスができるようになったので、テーブル単位でのクリップボードへのコピペをつくってみたくなった。