JavascriptでTABLEタグに行を追加、削除する

Javascriptを使ってHTML上のテーブルに行を追加したり、削除したりする必要があったので、メモ書きしておきます。

TABLEタグに行を追加、削除する
1. Javascriptのソース

TABLEタグに行を追加、削除する

Javascriptを使ってHTML上のテーブルに行を追加したり、削除したりする方法です。

Javascriptのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <SCRIPT>
            var table ;
            var row_no = 1 ;
            function table_add()
            {

                 //操作するテーブルへの参照を取得
                 table = document.getElementById( "test_table" ) ;

                 //取得したテーブルへ行を追加行番号は０相対、-1は最終行
                 var row = table.insertRow( -1 ) ;

                 //作成した行にセルを追加する。追加セル番号は０相対、-1は最終セル
                 var cell = row.insertCell( -1 ) ;

                 //テキストを追加
                 cell.appendChild( document.createTextNode( new String( row_no ))) ;
                 row_no++ ;

                 //ボタン追加
                 var cell = row.insertCell( -1 ) ;
                 var button = document.createElement( "input" ) ;   
                 button.type = "button";   
                 button.value = "削　除";   
                 //クリックイベント設定   
                 button.onclick
                     = function( event )
                       {
                           //行削除
                           table.deleteRow( 0 ) ;
                       } ;

                 //ボタン追加
                 cell.appendChild( button ) ;  
             }
        </SCRIPT>
    </HEAD>
    <BODY>
        <INPUT TYPE="button" VALUE="追加" onClick="javascript:table_add();">
        <TABLE id="test_table" BORDER="1">
        </TABLE>
    </BODY>
</HTML>

クリックイベントに選択さえた行を渡せればよいのですが、今はまだそこまで出来てません。

これから調査です。