HTML tableタグ: JavaScript (1)

• table タグ (1)
• table タグ (2)

td のインデックス値や内容を得る (2023)

• TestJS_table_cell_read01.html
  table のセルの内容を得る。
  
• TestJS_table_cell_index01.html
  クリックしたセルの行と列のインデックス値を得る。
  table td にイベント処理をつける
  
• TestJS_querySelector_table01.html
  querySelector() で指定の行・列の td のテキストを読む。
  document.querySelector() を使う
• TestJS_table_delete_tr01.html
  クリックした行を削除する。
  
• TestJS_sort_table_tr01.html (2023/12)
  指定の列 (td) の値を見て行をソートする。
  HTML 要素を並べ替える

JavaScript で table を作成する

• TestJS_table_create03.html (2020)
  insertRow(), insertCell() で tr要素,td要素を作る。
• TestJS_table_create02.html (2020)
  document.createElement() で table 要素を作成する。
  

table 作成いろいろ

計算、換算表を作る

• TestJS_kanzan_zougen1.html
  換算表を作る。増減率の計算。複利計算。
  JavaScript テキストデータを読んで処理
  ツールサンプル: 計算する - 換算表など
  

onclick などのイベント登録を JavaScript でまとめて行う

• TestJS_table_td_click02.html (2021)
  JavaScript でクリックイベントを付けるサンプル。ES2015 使用。
  

テキストデータを読んで table を作成する

• TestJS_table_create_textarea01.html
  スペースやタブで区切られたテキストデータから table の HTML を生成。
  textarea, テキストデータを読んで処理
• TestJS_table_create_from_tsv01.html
  HTML の pre タグ内に格納した TSV データを読んで table を作成
  
• TestJS_table_create_from_tsv02.html
  js ファイルに格納した TSV データを読んで table を作成
  

iframe にデータを格納して読む方法もあります。 同一ホスト以外では使わない方が良いです。

この話をもうちょっと複雑にすると、 HTML 内にあらかじめデータを格納するのではなく、 HttpXMLRequest などを使ってホストから必要なデータファイルをダウンロードして 表を表示する話になります。 データのフォーマットも単純な TSV, CSV テキストから JSON や XML などを使ったものまでさまざま。
データフォーマットの話
JavaScript: XMLの処理

関連

• HTML: tableタグ (1)
• HTML: tableタグ (2)
• HTML: tableタグ: JavaScript (2)