たろマーク （はてなブックマーク）
-
[ moinmoin ]
-
[ upstart ] プロセス監視して死んでも蘇らせてくれるのか。
■ フォームの要素を追加したり削除したりする
「項目を追加する」ボタンで項目を一つ追加します。
「項目を削除する」ボタンで項目を一つ削除します。
最初からある項目1は削除されません。
スクリプト
スクリプトはこんな感じ。
var ItemField = {
currentNumber : 1,
itemTemplate : '<h3>項目__count__<h3/>'
+ '<p><input type="text" name="text__count__" size="30" /></p>',
add : function () {
this.currentNumber++;
var field = document.getElementById('item' + this.currentNumber);
var newItem = this.itemTemplate.replace(/__count__/mg, this.currentNumber);
field.innerHTML = newItem;
var nextNumber = this.currentNumber + 1;
var new_area = document.createElement("div");
new_area.setAttribute("id", "item" + nextNumber);
field.appendChild(new_area);
},
remove : function () {
if ( this.currentNumber == 1 ) { return; }
var field = document.getElementById('item' + this.currentNumber);
field.removeChild(field.lastChild);
field.innerHTML = '';
this.currentNumber--;
}
}
上の例は以下のように使ってます。
追加ボタンの onclick に ItemField.add()、削除は ItemField.remove() です。
ItemField.currentNumber で初期値を設定します。ItemField.add() は ItemField.currentNumber をインクリメントして使用するので、あらかじめ書いておいた div の id が item2 なら 1 です。
（これちょっと分かりづらいね）
ItemField.itemTemplate には後から追加する項目のテンプレートを入れておきます。
__count__ という文字列を入れておくと追加したときの ItemField.currentNumber に replace されます。
<h4>項目1</h4>
<p><input type="text" name="text1" size="30" /></p>
<div id="item2"></div>
<p><input type="button" value="項目を追加する" onClick="ItemField.add();" /></p>
<p><input type="button" value="項目を削除する" onClick="ItemField.remove();" /></p>
<form>
<script type="text/javascript" src="/scripts/field.js"></script>
<script type="text/javascript">
ItemField.currentNumber = 1;
ItemField.itemTemplate
= '<h4>追加項目__count__</h4>'
+ '<p><input type="text" name="text__count__" size="30" /></p>';
</script>
最初作ったとき、appendChild がよく分かって無くていろいろつまづいた。
どんどん div がネストしていくようになってしまったりとか(;'-')
後は全体的に変数名とかメソッド名がちょっとアレな感じなのを今後何とかしていきたい。
タイトルではフォームの要素をと書いたけど、itemTemplate を書き換えれば何でも追加したり削除したり出来るね
オライリージャパン (2007/05)
売り上げランキング: 40760
浅い内容
構成が悪く、読みにくい
ちょっと優しい感じのオライリー
| パーマリンク
| 
