2008年2月7日木曜日

JavaScript:selectの連動させてtableを動的に変更する

selectフォームで選択をするとeventが発生。その際にselectのオプションの値の数だけ、
テーブルを行追加する。


-------------------------------------------------- sample.html -------------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">
var mydoc = document;

function action_tr(){
var table,tbody,tr,td;
var val
val = document.form1.aa.options[document.form1.aa.selectedIndex].value;
table = document.getElementById("tet");
trows = table.rows.length -1;
for(i = trows; i > 0; i--){
table.deleteRow(i);
}
for(i = 1; i < val; i++){
new_row = table.insertRow(i);
new_row.insertCell(0).appendChild(document.createTextNode('AA'));
new_row.insertCell(1).appendChild(document.createTextNode('BB'));
}
}
</script>
</head>
<body>
<form id="form1" name="form1" action="" method="post">
<table id="tet" border=1>
<tr>
<td>
<select name="aa" onChange="action_tr();">
<option value="">-</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
</select>
</td>
<td> dounanoyo
</td>
</tr>


</table>
<div id="tt"></div>
</form >
</body>
</html>
-------------------------------------------------- sample.html -------------------------------------------

0 件のコメント: