人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://q.hatena.ne.jp/1182224916
で質問している内容で
テキストボックスを追加すると
今まで入力していた内容が
消されてしまいます。

これを追加するときに入力された値を
表示したまま追加するには
どうしたらいいのでしょうか?

●質問者: hopefully
●カテゴリ:就職・転職 ウェブ制作
✍キーワード:テキスト ボックス 入力
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● tully
●10ポイント

CSS(クロスサイトスクリプト)を考慮していないからではないでしょうか?

IEとFireFoxでは、同じスクリプトで両方動かないものがあるはずです。(昔の記憶なのであいまいですが、IEとNN(ネットスケープ)で、それぞれのソースを記述したりすることが必要でした)


2 ● openseed
●60ポイント

スクラッチで書き直してみました。


以下は、IE6とFF2 for xpでのみ確認しています。

<script language="JavaScript" type="text/javascript">
<!--


function TextBoxArea(id){
    this.IDNumber = 0;
    this.id = id;

    return this;
}

TextBoxArea.prototype = {
    add: function AddTextBox(){
        var obj = document.getElementById(this.id);


        var basename = this.id + this.IDNumber;


        var panel = document.createElement("div");
        panel.innerHTML=
                '<input name="'+basename+'" type="text" />' + 
                '<input name="caller'+basename+'" type="radio" />' + 
                'テスト完了' + 
                '<input name="ok'+basename+'" type="radio" />' + 
                '日本語完了';

        obj.appendChild(panel);

        this.IDNumber++;


    },
    remove: function RemoveTextBox() {
        var obj = document.getElementById(this.id);
        if(obj.lastChild){
            obj.removeChild(obj.lastChild);
        }
    }
}

var textArea = new TextBoxArea('test');

// -->
</script>
<body>
<form>
<table border="1">
<tr>
<td>テスト項目</td>
<td><input type=button value=" add " onClick="textArea.add();"></td>
<td id ="test9_a"><input type=button value=" del " onClick="textArea.remove();"></td>
<td id ="test"></td>
</tr>
</table>
</form>
</body>

※ appendChildでradioボタンを追加するとWinIE5,6では選択できなくなる、という問題があるようです。そのため、innerHTML と appendChild を組み合わせる必要があります。

http://www.google.co.jp/search?hl=ja&rlz=1T4GGLJ_jaJP173JP17...




うまくいかなかったコード・・・。念のため。

    add: function AddTextBox(){
        var obj = document.getElementById(this.id);

        var panel = document.createElement("div");
        var elem;

        var basename = this.id + this.IDNumber;

        elem = document.createElement("input");
        elem.setAttribute("name", basename);
        elem.setAttribute("type", "text");
        panel.appendChild(elem);

        elem = document.createElement("input");
        elem.setAttribute("name", "caller" + basename);
        elem.setAttribute("type", "radio");
        panel.appendChild(elem);

        panel.appendChild(document.createTextNode("テスト完了"));

        elem = document.createElement("input");
        elem.setAttribute("type", "radio");
        elem.setAttribute("name", "ok" + basename);

        panel.appendChild(elem);

        panel.appendChild(document.createTextNode("日本語完了"));

        obj.appendChild(panel);


        this.IDNumber++;
    }

◎質問者からの返答

なるほどですw

今、FireFoxでやったのですが

追加する際にテーブルの中から

はみだしてしまいます。

削除するとテーブルの中に収まるのですが

追加したらテーブル内で収まるように

出来ますか?

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ