○テーブルの行追加のサンプル ・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
|
|