全て非公式

Javascript Laboratory

Javascriptの実験と備忘録。IE6とFirefox2で動作を確認。

・表示/非表示切り替え
・テーブルの行追加/削除
・SELECTの選択肢追加/削除

・モールス符号変換

---

表示/非表示切り替え

表示フラグ： （これがあることで、表示・非表示の状態の保存が可能。実用時にはhiddenに）

表示を切り替えたい対象のエリア
非表示にする

表示切替対象が非表示の時に表示するエリア
対象を表示する（これを非表示にする）

ソース
//状態を保存させることを前提にした関数 //保存が不要なら、onClickで直接styleを操作すればいい。 //onloadで実行することで、フラグの値を元に表示を自動的に切り替える function chkDispArea(){ var flg=(document.area_display.is_disp_area.value==0)?0:1; document.getElementById('disp_area').style.display=(flg?'block':'none'); document.getElementById('nodisp_area').style.display=(flg?'none':'block'); // divなので'block'、切り替える対象により変わる } //ボタンなどでこれを使用 1:表示、0:非表示 function chgDispArea(flg){ document.area_display.is_disp_area.value=(flg==0)?0:1; chkDispArea(); }

↑ページの上へ

テーブルの行追加/削除

・Tableの最後に行追加、削除

テンプレート用テーブル （disabled にすることでサーバに値を渡さなくて済む、実用時にはstyleで非表示にする）

0

1 2 3

No	タイトル行	select	radio	check
1		1 2 3
2		1 2 3
3		1 2 3

ソース
/*** 行追加・削除処理 ***/ //テンプレート行のオブジェクトをもとにして、指定の表の指定行に挿入する // obj_row 挿入するtrオブジェクト // obj_table 行を挿入するtableオブジェクト // index 挿入するindex（一番下に追加ならlengthと等しくなる) function insertRowByTemplate(obj_row,obj_table,index){ var tpl_cell=obj_row.cells; var new_row=obj_table.insertRow(index),cel,oc,o,t,l,m=tpl_cell.length; for(var i=0;i<m;i++){ cel=tpl_cell[i].cloneNode(true); oc=cel.childNodes; l=oc.length; for(var j=0;j<l;j++){ o=oc[j]; if((t=o.tagName)=='INPUT'||t=='SELECT')o.disabled=false; //追加処理時にINPUTとSELECTのdisable=falseにしている } new_row.appendChild(cel); } } //一番下に行追加 function addTableRowLast(){ var row=document.getElementById('Table_rows_test_tpl').rows[0]; var tbl=document.getElementById('Table_rows_test'); insertRowByTemplate(row,tbl,tbl.rows.length); // Noを書き込む処理 var o=document.getElementsByName('table_rows_no'),l=o.length-1; o[l].innerHTML=l; } //一番下の行削除 function delTableRowLast(){ var f=document.table_rows; var tbl=document.getElementById('Table_rows_test'); //行を削除したいtableオブジェクト var del_index=tbl.rows.length-1; //削除したい行のindex(一番下ならlength-1) var min=2; //最低限残す行数 var m=f.rows_input.length-1; // 入力欄の一番最後のindex if(m-1<min){ alert('これ以上行を減らすことは出来ません。'); return; }else{ //削除する行に値やチェックが入っていないか確認 if(f.rows_input[m].value!=''||f.rows_select[m].value!=0||f.rows_radio[m].checked||f.rows_checkbox[m].checked){ if(!confirm("値やチェックが入っている項目がありますが、一番下の行を削除していいですか？"))return; } } tbl.deleteRow(del_index); }

↑ページの上へ

SELECTの選択肢追加/削除

 

↑ページの上へ

いろいろテスト

・TR

行１	A	あ		選択１ 選択２ 選択３
行２	B	い		選択１ 選択２ 選択３
行３	C	う		選択１ 選択２ 選択３

行１の disabled / display / visibility

・OPTION

-- 選択１ 選択２ 選択３ 選択４ 選択５

	disabled		display		visibility
選択１

・SELECTの変更禁止

-- 値１ 値２ 値３ 値４ 値５ 変更可能 ：blur()で制御、Firefox2はOK、IE6はNG、

↑ページの上へ

---