○テーブルの行追加のサンプル
・JavaScript
function init(){
document.f1.cnt.value=0;
}
function change_s_item() {
var cnt = document.f1.cnt.value;
var s_item_value = document.f1.s_item.value;
if(s_item_value == ""){return false;}
cnt++;
document.f1.cnt.value = cnt;
var tr1 = document.createElement('tr');
tr1.setAttribute("id", "tr"+cnt);
document.getElementById('table1').appendChild(tr1);
for(i=1;i<=3;i++){
var td1 = document.createElement('td');
td1.setAttribute("id", "td"+cnt+"_"+i);
td1.setAttribute("width", "200");
td1.innerHTML = "add"+cnt+i+" "+s_item_value;
document.getElementById('tr'+cnt).appendChild(td1);
}
document.f1.s_item.value = "";
return true;
}
・HTML
<body onload="init()">
<form name="f1">
<input type="hidden" name="cnt" id="cnt" value="0">
<table border="1" id="table1" width="600">
<tr><th width="200">A</th><th width="200">B</th><th width="200">C</th></tr>
</table>
<table border="1" id="table3" width="600">
<tr id="tr_select">
<td width="200">
<select name="s_item" id="s_item" onchange="change_s_item()">
<option value="" selected></option>
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
</td>
<td width="200"></td>
<td width="200"></td>
</tr>
</table>
</form>
</body> |
No.216 2014/05/25(Sun) 21:23:28
| |
○テーブルの行追加のサンプル 追記
var s_item_option = document.f1.s_item.options[document.f1.s_item.selectedIndex].text; |
No.217 2014/05/29(Thu) 21:22:24
|
|
