回答編集履歴

2 解説つき

yambejp

yambejp score 50441

2017/09/08 09:50  投稿

流れ的にはこんな感じでどうでしょうか?
```css
/*formが幅をとるのでとりあえずinlineにしておく*/  
form{display:inline}
```
```script
/*セレクトボックスから呼び出す関数、内容はダミー*/  
function imgChange(){
 console.log("call imgchange");
}
/*ボタンを押すと呼び出される関数 テーブルに行を追加*/  
function AddTableRows(){
 /*挿入したいテーブルのtbodyを"t"とする*/  
 var t   = document.querySelector("#table1 tbody");
 /*挿入したい行を"row"とし、"row"を"t"に挿入する*/  
 var row = document.createElement("tr");
 t.appendChild(row);
 /*挿入したいセルを"cell"とし、"cell"を"row"に挿入する*/  
 var cell = document.createElement("td");
 row.appendChild(cell);
 /*"cell"にクラス"syu"を追加する*/  
 cell.classList.add("syu");
 /*挿入したいセルを"f"とし、"f"を"cell"に挿入する*/  
 var f   = document.createElement("form");
 cell.appendChild(f);
 /*挿入したいセレクトボックスを"s"とし、"s"を"f"に挿入する*/  
 var s   = document.createElement("select");
 f.appendChild(s);
 /*"s"に、"shumoku"というnameを設定する*/  
 s.setAttribute("name","shumoku");
 /*"s"に、onchange時に実行する関数imgChangeを設定する*/  
 s.addEventListener("change",function(){imgChange();});
 [
 /*セレクトボックスに入れるoptionのvalueとテキストの一覧を作っておいて*/
[
   {value:0,text:"aaa"},
   {value:1,text:"bbb"},
   {value:2,text:"ccc"},
   {value:3,text:"ddd"},
   {value:4,text:"eee"},
   {value:5,text:"fff"},
   /*mapをつかって一覧の頭から順番に処理*/  
   ].map(function(i){
     /*挿入したいオプションを"o"とし、"o"を"s"に挿入する*/  
     var o = document.createElement("option");
     s.appendChild(o);  
     /*oのvalueに一覧から受け取ったオブジェクト"i"のvalue値を設定する*/  
     o.setAttribute("value",i.value);
     /*oのテキストに一覧から受け取ったオブジェクト"i"のtext値を設定する*/  
     o.appendChild(document.createTextNode(i.text));
     s.appendChild(o);  
   });
}
```
```HTML
<input type="button" value="add row" onclick="AddTableRows()">
<table id="table1">
<thead>
<tr>
<th>test</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
1 調整

yambejp

yambejp score 50441

2017/09/07 21:35  投稿

流れ的にはこんな感じでどうでしょうか?
```css
form{display:inline}
```
```script
function imgChange(){
 console.log("call imgchange");
}
function AddTableRows(){
 var t   = document.querySelector("#table1 tbody");
 var row = document.createElement("tr");
 t.appendChild(row);
 var cell = document.createElement("td");
 row.appendChild(cell);
 cell.classList.add("class","syu");
 cell.classList.add("syu");
 var f   = document.createElement("form");
 cell.appendChild(f);
 var s   = document.createElement("select");
 f.appendChild(s);
 s.setAttribute("name","shumoku");
 s.addEventListener("change",function(){imgChange();});
 [
   {value:0,text:"aaa"},
   {value:1,text:"bbb"},
   {value:2,text:"ccc"},
   {value:3,text:"ddd"},
   {value:4,text:"eee"},
   {value:5,text:"fff"},
   ].map(function(i){
     var o = document.createElement("option");
     o.setAttribute("value",i.value);
     o.appendChild(document.createTextNode(i.text));
     s.appendChild(o);
   });
}
```
```HTML
<input type="button" value="add row" onclick="AddTableRows()">
<table id="table1">
<thead>
<tr>
<th>test</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る