Text Chenge

Table に登録した Text を書き換える。

【実行画面】

１行１列	１行２列
２行１列	２行２列
３行１列	３行２列

【head に定義した関数】

function func(num)
{   window.alert(num);
    document.getElementById(num).textContent= "NEW" + num;
}

【実行画面の Source Code】

<table border="1">
  <tr><td><div id="S11" onclick=func("S11")>１行１列</div></td> <td><div id="S12" onclick=func("S12")>１行２列</div></td><tr>
  <tr><td><div id="S21" onclick=func("S21")>２行１列</div></td> <td><div id="S22" onclick=func("S22")>２行２列</div></td><tr>
  <tr><td><div id="S31" onclick=func("S31")>３行１列</div></td> <td><div id="S32" onclick=func("S32")>３行２列</div></td><tr>
</table>

ページ先頭のテーブルのセルをクリックすると Text が変更されます。
テーブルの <td> には div で id と onclick 関数が定義されています。
セルをクリックすると onclick の func() 関数が呼ばれます。
func() 関数には、id と同じ文字列がパラメータとして渡されます。
id が num のドキュメント要素を取得して、textContent を "NEW" + num; に変更します。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)