回答編集履歴
2
解説つき
answer
CHANGED
|
@@ -1,37 +1,53 @@
|
|
|
1
1
|
流れ的にはこんな感じでどうでしょうか？
|
|
2
2
|
|
|
3
3
|
```css
|
|
4
|
+
/*formが幅をとるのでとりあえずinlineにしておく*/
|
|
4
5
|
form{display:inline}
|
|
5
6
|
```
|
|
6
7
|
```script
|
|
8
|
+
/*セレクトボックスから呼び出す関数、内容はダミー*/
|
|
7
9
|
function imgChange(){
|
|
8
10
|
console.log("call imgchange");
|
|
9
11
|
}
|
|
12
|
+
/*ボタンを押すと呼び出される関数 テーブルに行を追加*/
|
|
10
13
|
function AddTableRows(){
|
|
14
|
+
/*挿入したいテーブルのtbodyを"t"とする*/
|
|
11
15
|
var t = document.querySelector("#table1 tbody");
|
|
16
|
+
/*挿入したい行を"row"とし、"row"を"t"に挿入する*/
|
|
12
17
|
var row = document.createElement("tr");
|
|
13
18
|
t.appendChild(row);
|
|
19
|
+
/*挿入したいセルを"cell"とし、"cell"を"row"に挿入する*/
|
|
14
20
|
var cell = document.createElement("td");
|
|
15
21
|
row.appendChild(cell);
|
|
22
|
+
/*"cell"にクラス"syu"を追加する*/
|
|
16
23
|
cell.classList.add("syu");
|
|
24
|
+
/*挿入したいセルを"f"とし、"f"を"cell"に挿入する*/
|
|
17
25
|
var f = document.createElement("form");
|
|
18
26
|
cell.appendChild(f);
|
|
27
|
+
/*挿入したいセレクトボックスを"s"とし、"s"を"f"に挿入する*/
|
|
19
28
|
var s = document.createElement("select");
|
|
20
29
|
f.appendChild(s);
|
|
30
|
+
/*"s"に、"shumoku"というnameを設定する*/
|
|
21
31
|
s.setAttribute("name","shumoku");
|
|
32
|
+
/*"s"に、onchange時に実行する関数imgChangeを設定する*/
|
|
22
33
|
s.addEventListener("change",function(){imgChange();});
|
|
34
|
+
/*セレクトボックスに入れるoptionのvalueとテキストの一覧を作っておいて*/
|
|
23
|
-
|
|
35
|
+
[
|
|
24
36
|
{value:0,text:"aaa"},
|
|
25
37
|
{value:1,text:"bbb"},
|
|
26
38
|
{value:2,text:"ccc"},
|
|
27
39
|
{value:3,text:"ddd"},
|
|
28
40
|
{value:4,text:"eee"},
|
|
29
41
|
{value:5,text:"fff"},
|
|
42
|
+
/*mapをつかって一覧の頭から順番に処理*/
|
|
30
43
|
].map(function(i){
|
|
44
|
+
/*挿入したいオプションを"o"とし、"o"を"s"に挿入する*/
|
|
31
45
|
var o = document.createElement("option");
|
|
46
|
+
s.appendChild(o);
|
|
47
|
+
/*oのvalueに一覧から受け取ったオブジェクト"i"のvalue値を設定する*/
|
|
32
48
|
o.setAttribute("value",i.value);
|
|
49
|
+
/*oのテキストに一覧から受け取ったオブジェクト"i"のtext値を設定する*/
|
|
33
50
|
o.appendChild(document.createTextNode(i.text));
|
|
34
|
-
s.appendChild(o);
|
|
35
51
|
});
|
|
36
52
|
}
|
|
37
53
|
```
|
1
調整
answer
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
t.appendChild(row);
|
|
14
14
|
var cell = document.createElement("td");
|
|
15
15
|
row.appendChild(cell);
|
|
16
|
-
cell.classList.add("
|
|
16
|
+
cell.classList.add("syu");
|
|
17
17
|
var f = document.createElement("form");
|
|
18
18
|
cell.appendChild(f);
|
|
19
19
|
var s = document.createElement("select");
|