2007年06月16日

HTML要素を動的に追加・削除する

mozillaのページにある「基本的 DOM インターフェイスによる HTML 要素の動的操作法」を参考にして、動的にフォームを追加・削除するサンプルを作ってみました。

例として「履歴書」の履歴項目を追加・削除する内容になっています。

履歴書

1 入社年月 会社名


要素を追加する
基本的なながれとしては以下のようになります。
1) 要素を追加したいオブジェクト(親オブジェクト)への参照を取得。
 ID名で取得(確実)
  親オブジェクト = document.getElementByID("ID名");
 タグ名(TABLEとかTDとか)で取得。numは0から始まる順番
  document.getElementsByTagName("タグ名").item(num);

2) 追加したい要素を生成。
 オブジェクト名 = document.createElement("タグ名");

3)生成した要素の属性をセット
 オブジェクト名.setAtrribute("属性","値");

4)生成した要素を親オブジェクトへ追加
 親オブジェクト.appendChild(オブジェクト名);

ボタンをクリックした際にJavaScriptを実行するような属性を付けたい場合がありますが、
 ボタン名.setAttribute("onClick","javascript名()");
だと実行されません(IE6)

この場合は、まずJavaScriptをvarで変数として宣言します。
var testscript = function() {
  alert('Test Message');
}
そしてonclickのアクションとして変数を指定します。
 ボタン名.setAttribute("onClick","testscript");

詳しくはここ↓を参照
setAttribute メソッドを使用したとき、IEでは簡単にイベントハンドラを設定できない話

要素を削除する
1) 要素を削除したいオブジェクトの親オブジェクトへの参照を取得。
 親オブジェクト = document.getElementByID("ID名");

1) 要素を削除したいオブジェクトへの参照を取得。
 削除するオブジェクト = document.getElementByID("ID名");

3)removeChildメソッドを使って削除
 親オブジェクト.removeChild(削除するオブジェクト);

削除はカンタン。


===ソースコード===
<html>
<head>
<title>サンプルコード - 基本的 DOM インターフェイスによる HTML 要素の動的操作法</title>
<style>
#ymd{font-size: 10pt; width:60}
#txt{font-size: 10pt; width:200}
td    {font-size: 10pt;}
#num {width: 20px};
</style>
<script language="JavaScript">
<!--
    var i = 1;
    var maxrows = 10;
    function hage() {
        i++;
        // Tbody への参照を取得します
        var mybody=document.getElementById("histTablebody");
        // セルを生成します
            // タグ名が TR である要素を生成します
            mycurrent_row=document.createElement("TR");
            mycurrent_row.setAttribute("id","histrow"+i);
                // -------
                // タグ名が TD である要素を生成します
                mycurrent_cell=document.createElement("TD");
                mycurrent_cell.setAttribute("id","num");
                // テキストノードを生成します。
                currenttext=document.createTextNode(i);
                // 生成したテキストノードを TD セルへと付加します
                mycurrent_cell.appendChild(currenttext);
            // その TD セルを TR 行へと付加します
            mycurrent_row.appendChild(mycurrent_cell);
                // -------
                // タグ名が TD である要素を生成します
                mycurrent_cell=document.createElement("TD");
                // テキストノードを生成します。
                currenttext=document.createTextNode("入社年月");
                // 生成したテキストノードを TD セルへと付加します
                mycurrent_cell.appendChild(currenttext);
            // その TD セルを TR 行へと付加します
            mycurrent_row.appendChild(mycurrent_cell);
                // -------
                // タグ名が TD である要素を生成します
                mycurrent_cell=document.createElement("TD");
                // フォームノードを生成します
                mycurrent_form=document.createElement("INPUT");
                mycurrent_form.setAttribute("type","TEXT");
                mycurrent_form.setAttribute("name","ENTRY_Y" + i);
                mycurrent_form.setAttribute("value","");
                mycurrent_form.setAttribute("id", "ymd");
                // 生成したフォームノードを TD セルへと付加します
                mycurrent_cell.appendChild(mycurrent_form);
                // テキストノードを生成します。
                currenttext=document.createTextNode("年");
                // 生成したテキストノードを TD セルへと付加します
                mycurrent_cell.appendChild(currenttext);
                // フォームノードを生成します
                mycurrent_form=document.createElement("INPUT");
                mycurrent_form.setAttribute("type","TEXT");
                mycurrent_form.setAttribute("name","ENTRY_M" + i);
                mycurrent_form.setAttribute("value","");
                mycurrent_form.setAttribute("id", "ymd");
                // 生成したフォームノードを TD セルへと付加します
                mycurrent_cell.appendChild(mycurrent_form);
                // テキストノードを生成します。
                currenttext=document.createTextNode("月");
                // 生成したテキストノードを TD セルへと付加します
                mycurrent_cell.appendChild(currenttext);
            // その TD セルを TR 行へと付加します
            mycurrent_row.appendChild(mycurrent_cell);
                // -------
                // タグ名が TD である要素を生成します
                mycurrent_cell=document.createElement("TD");
                // テキストノードを生成します。
                currenttext=document.createTextNode("会社名");
                // 生成したテキストノードを TD セルへと付加します
                mycurrent_cell.appendChild(currenttext);
            // その TD セルを TR 行へと付加します
            mycurrent_row.appendChild(mycurrent_cell);
                // -------
                // タグ名が TD である要素を生成します
                mycurrent_cell=document.createElement("TD");
                // フォームノードを生成します
                mycurrent_form=document.createElement("INPUT");
                mycurrent_form.setAttribute("type","TEXT");
                mycurrent_form.setAttribute("name","COMPANY_NAME" + i);
                mycurrent_form.setAttribute("value","");
                mycurrent_form.setAttribute("id", "txt");
                // 生成したフォームノードを TD セルへと付加します
                mycurrent_cell.appendChild(mycurrent_form);
            // その TD セルを TR 行へと付加します
            mycurrent_row.appendChild(mycurrent_cell);
        // その TR 行を TBODY へと付加します
        mybody.appendChild(mycurrent_row);
        // 削除ボタンを有効にする
        document.hogehoge.delrow.disabled=false;
        // テーブルの数(行の数)がmaxrows以上の場合は
        // 追加ボタンを無効にする
        if(i>=maxrows){
            document.hogehoge.addrow.disabled=true;
        }
    }
    var hige =    function() {
        var mytable=document.getElementById("histTablebody");
        var removeTable=document.getElementById("histrow"+i);
        mytable.removeChild(removeTable);
        i--;
        // テーブルの数(行の数)が0の場合は
        // 削除ボタンを無効にする
        if(i==1){
            document.hogehoge.delrow.disabled=true;
        }
        // 追加ボタンを有効にする
        document.hogehoge.addrow.disabled=false;
    }
    var result =    function() {
        alert('あなたの履歴は'+i+'件です。');
    }
//-->
</script>
</head>
<body onload="document.hogehoge.delrow.disabled=true;">
<h1>履歴書</h1>
<form name="hogehoge">
    <div id="hist">
        <table border="1">
            <tbody  id="histTablebody">
                <tr id="histrow1">
                    <td id="num">1</td>
                    <td>入社年月</td>
                    <td><input type="text" name="ENTRY_Y1" id="ymd">年
                    <input type="text" name="ENTRY_M1" id="ymd">月</td>
                    <td>会社名</td>
                    <td><input type="text" name="COMPANY_NAME1" id="txt"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <table>
        <tr>
            <td>
                <input type="button" id=addrow value="行を追加" 
                onClick="hage();">
            </td>
            <td>
                <input type="button" id=delrow value="行を削除" 
                onClick="hige();" disabled="true">
            </td>
            <td>
                <input type="button" value="登録" onClick="result()">
            </td>
        </tr>
    </table>
</form>
</body>
</html>



posted by まきすけ at 14:53 | Comment(5) | TrackBack(0) | Linuxとか
この記事へのコメント
猫ぐらし: HTML要素を動的に追加・削除する
Posted by ティファニー 銀座 at 2013年07月21日 09:14
データが2件の状態でリロードすると、テーブルが1行になり、削除ボタンが復活してしまいます。

何かいい方法はないでしょうか?
Posted by あがた at 2014年03月03日 23:07
var mytable=document.getElementById("vartable");
<table border="1" id="vartable">

すみません、こんな感じでtableにidをつけることで対応してみました。。
Posted by あがた at 2014年03月03日 23:14
あがた さんと同様で
「データが2件の状態でリロードすると、テーブルが1行になり、削除ボタンが復活してしまいます。」

解決としては
var mytable=document.getElementById("vartable");
<table border="1" id="vartable">
を入れたり,書き換えたりする
というようになっていますが

僕が試したのですがうまくいきませんでした。

どうすればいいのですか?
Posted by あきら at 2014年07月17日 17:23
コメントが遅くなって恐縮ですが、HTMLのbodyにonloadファンクションを追加することで対応可能だと思います。
<body onload="document.hogehoge.delrow.disabled=true;">

ブログだとbody部分に直接記載できないので、記事末尾に下記の処理を加えることで対応しています。
<script language="JavaScript">
<!--
document.hogehoge.delrow.disabled=true;
-->
</script>
Posted by まきすけ at 2014年12月03日 07:03
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/45031561

この記事へのトラックバック