回答編集履歴

2 解説つき

yambejp score 69841

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 score 69841

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>

```