テーブルの行の挿入・削除を行う
次に，もう少し複雑なサンプルを見てみよう。テーブルを使った行の挿入・削除（図5）について説明する。コードはリスト1とリスト2である。
 |
| 図5●テーブルの行を追加したり，削除したりするサンプル（Internet Explorerで動作を確認した）。こちらからソースをダウンロードできます [画像のクリックで拡大表示] |
 |
| リスト1●図5のHTMLドキュメント（page1.htm） [画像のクリックで拡大表示] |
 |
| リスト2●ボタンを押したときに動作するJavaScriptプログラム（mytable.js） |
まずリスト1をご覧いただきたい。JavaScriptファイルのインクルード(1)やonclick属性(2)(3)の部分は，先ほどのサンプルで説明した通りである。
[追加]ボタンを押したときに呼び出す関数はadd_mytableである(3)。ここで，引数が先ほどとは違っている点に注意してほしい。図4の(2)では，テキストボックスのvalue属性，つまりタイプされた値(文字列)を渡していた。これに対してリスト1では，テキストボックスを表すオブジェクト自体を渡している。add_mytable関数の側でオブジェクトのvalue属性を更新するからである。
リスト2のadd_mytable関数の中では，まず引数で渡したテキストボックスのvalue属性を保存してから，これを空文字列に設定している(4)。[追加]ボタンの処理が終わったら，テキストボックスの内容をクリアしないと操作性が悪いからだ。そして，もしテキストボックスが空なら，何もしないで処理を終了する(5)。そうしないと，ボタンを押すたびに，テキストボックスの内容が空であろうが何であろうが行が追加されてしまう。
次に行を挿入する(6)。まずテーブルに該当するオブジェクトを変数elに取り出し，insertRowというメソッドで行（HTMLで言うとTRエレメント）を挿入し，さらにこの行に対して二つのセル（HTMLでいうTDエレメント）を挿入する。最初のセルには行選択用のチェックボックスのHTMLを埋め込み，二つ目のセルにはテキストボックスにタイプした文字列を埋め込む。これで[追加]ボタンの処理は終了する。
今度は行の削除del_mytableを見ていこう。(7)が何をしているかは，もう説明の必要がないだろう。(8)はちょっと複雑だ。要するにテーブルの行のコレクションel.rowsから，チェックボックスにチェックが付いている行を見つけて，その行のインデックスを配列selに追加していく。
コードに即して説明すると，「テーブルの各行について，その行の最初のセルに含まれるINPUTエレメント（つまりチェックボックス）のchecked属性がtrueであるかどうかを調べ，trueならその行のインデックスを配列selに追加する，となる。そして，すべて調べ終わったら，配列selを見ながら，追加とは逆順に行を削除していく(9)。行の下方向に向かって（インデックスの昇順で）削除していくとインデックスがずれてしまうので，最下行から先頭に向かって（インデックスの降順で）削除をしているわけだ。
このサンプルで遊んでいると，いくつか不満が出てくる。テキストボックスに自動的にフォーカスしてほしいとか，Enterキーを押したら[追加]ボタンを押したことにしてほしい，あるいはショートカット・キーが欲しい（「Alt＋D」を押したら[削除]とか）などという要望も出てくるかもしれない。これらはすべてJavaScriptで実装できる。興味のある人は力試しだと思ってやってみていただきたい。
