ノード追加削除
ノード追加削除
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD.xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta HTTP-EQUIVE="Content-Type" CONTENT="text/html;charset=utf-8" />
<title>DOMツリーにコントロールを追加もしくは削除します</title>
<!-- ノード追加削除 -->
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/classmate9.js" type="text/Javascript"></script>
</head>
<body>
コントロール名:
<input type=text id=checkBoxName name=checkBoxName value="コントロール" /><br />
コントロール数:
<input type=text id=checkBoxNum name=checkBoxNum value=2 size=1 />
<div>
<input type=button id=createCheckBox name=createCheckBox value="コントロール作成" />
<input type=button id=removeCheckBox name=removeCheckBox value="コントロール削除" />
</div>
</body>
</html>
<!--
classmate9.js
//作成有無のフラグ
var checkCount = 0;
//ページをロードするタイミングでコントロールを作成するイベント処理を
//実行します。
Event.observe( window, 'load', function(){
//コントロール作成イベント
createControlEvent();
}
);
//コントロール作成イベント
function createControlEvent(){
var objDivNode = null;
//イベント作成
//チェックボックス作成
Event.observe(
'createCheckBox',
'click',
function(){
//作成済みの場合は処理を抜ける
if(checkCount > 0)
{
return;
}
objDivNode = createDisplayNode();
//ページで指定した数を取得します
var checkBoxName = $( 'checkBoxName' ).value;
//指定した数の分だけ繰り返し処理をします
for( var i = 1; i <= $( 'checkBoxNum' ).value; i++ ){
//INPUTを生成します
var objCheckNode = document.createElement( 'input' );
//属性をチェックボックスに設定します
objCheckNode.setAttribute( 'type', 'checkbox' );
//チェックボックスチェックボックスを子ノードとして追加します
objDivNode.appendChild( objCheckNode );
//INPUTを生成します
var objRadioNode = document.createElement( 'input' );
//属性をラジオボックスに設定します
objRadioNode.setAttribute( 'type', 'radio' );
//nameを同一にすることでグループ化します
objRadioNode.setAttribute( 'name', 'rdo' );
if(i == 1)
{
//最初のラジオボタンをチェック状態にします
objRadioNode.setAttribute( 'checked', true );
}
//ラジオボックスチェックボックスを子ノードとして追加します
objDivNode.appendChild( objRadioNode );
//コントロールに付属させるテキストを作成します
var objTextNode = document.createTextNode( checkBoxName + i );
//作成したテキストを子ノードとして追加します
objDivNode.appendChild( objTextNode );
}
//DIVノードに上記で作成した次のコントロールを追加します
//・チェックボックス
//・ラジオボタン
//・テキスト
document.body.appendChild( objDivNode );
//フラグをONにします
checkCount = 1;
}
);
//イベント作成
//チェックボックス削除
Event.observe(
'removeCheckBox',
'click',
function(){
//既にDIVノードにコントロールを作成している場合は
//追加処理をしないようにします
if(checkCount < 1)
{
return;
}
//オブジェクトが存在する場合はオブジェクトを削除します
if( objDivNode ){
document.body.removeChild( objDivNode );
//フラグを解除します
checkCount = 0;
}
}
);
}
//ページに表示するDIVノードを作成
function createDisplayNode(){
var objDivNode = null;
//DIVエレメントを作成します
objDivNode = document.createElement( 'div' );
//「class」属性を定義します
objDivNode.className = 'standard';
//作成したDIVノードを返します
return objDivNode;
}
--------------------------------------------------
-->
|
|