JavaScriptでドロップダウンメニューを追加する

お世話になっております。
HTMLとjavascriptを用いてドロップダウンメニューを動的に追加する方法を探しています。

下記のコードを用いてtableを追加しています。
そのうち１つ(HTML1)の要素をドロップダウンメニューに変更したいのですがJavaScriptでドロップダウンメニューを生成する方法がわかりません。

JavaScript
1function AddTableRows(){
2    // カウンタを回す
3    counter++;
4
5	var table1 = document.getElementById("table1");
6	var row1 = table1.insertRow(counter);
7	var cell1 = row1.insertCell(0);
8	var cell2 = row1.insertCell(1);
9	var cell3 = row1.insertCell(2);
10        var cell4 = row1.insertCell(3);
11
12	cell1.setAttribute("class","syu");
13	cell2.setAttribute("class","omosa");
14	cell3.setAttribute("class","kaisu");
15        cell4.setAttribute("class","set");
16
17	cell1.className = 'syu';
18	cell2.className = 'omosa';
19	cell3.className = 'kaisu';
20        cell4.className = 'set';
21
22	var HTML1 = '<input type="text" name="name' + counter + '" value="" size="10" maxlength="20" />';
23	var HTML2 = '<input type="number" name="omosa' + counter + '" value="" style="width:40px;"/>';
24	var HTML3 = '<input type="number" name="kaisu ' + counter + '" value="" style="width:40px;"/>';
25        var HTML4 = '×<input type="number" name="set ' + counter + '"  value="" style="width:30px;" />';
26	cell1.innerHTML = HTML1;
27	cell2.innerHTML = HTML2;
28	cell3.innerHTML = HTML3;
29        cell4.innerHTML = HTML4;
30}
31  </script>

HTML5内にあるドロップダウンメニューは以下のコードのものです。このメニュー自体をHTML１の部分でページ内に追加していきたいです。

HTML
1<select id=”syumoku”>
2      <option value=”test0”>0</option>
3       <option value=”test1”>1</option>
4       <option value=”test2”>2</option>
5       <option value=”test3”>3</option>
6       <option value=”test4”>4</option>
7       <option value=”test5”>5</option>
8       <option value=”test6”>6</option>
9       <option value=”test7”>7</option>               
10      </select>

MonacaでOnsenUIを用いてtable追加ボタンを設置しています。

javascript
1<form method="GET" action="#" >
2           <ons-button id="addtable" type="button" value="追加" onClick="AddTableRows();">追加
3         </form>

何卒よろしくお願いいたします。

参考にさせていただいたサイト様
http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、質問者さんが想像している動作は以下のような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<table border="1" cellspacing="0" cellpadding="4" id="table1">
15    <tr>
16        <th>名前</th>
17        <th>住所</th>
18        <th>TEL</th>
19    </tr>
20    <tr>
21        <td class="name">
22            <input type="text" name="name0" value="" size="10" maxlength="20">
23        </td>
24        <td class="address">
25            <input type="text" name="address0" value="" size="10" maxlength="20">
26        </td>
27        <td class="tel">
28            <input type="text" name="tel0" value="" size="10" maxlength="20">
29        </td>
30        <td class="syumoku">
31            <select id="syumoku0">
32                <option value=”test0”>0</option>
33                <option value=”test1”>1</option>
34                <option value=”test2”>2</option>
35                <option value=”test3”>3</option>
36                <option value=”test4”>4</option>
37                <option value=”test5”>5</option>
38                <option value=”test6”>6</option>
39                <option value=”test7”>7</option>
40            </select>
41        </td>
42    </tr>
43</table>
44<form method="GET" action="#">
45    <input type="button" value="テーブルに行を追加" onClick="AddTableRows();">
46</form>
47<script>
48    var counter = 0;
49
50    function AddTableRows() {
51        counter++;
52
53        var table1 = document.getElementById("table1");
54        var row1 = table1.insertRow(counter);
55        var cell1 = row1.insertCell(0);
56        var cell2 = row1.insertCell(1);
57        var cell3 = row1.insertCell(2);
58        var cell4 = row1.insertCell(3);
59
60        cell1.setAttribute("class", "name");
61        cell2.setAttribute("class", "address");
62        cell3.setAttribute("class", "tel");
63        cell4.setAttribute("class", "syumoku");
64        cell1.className = 'name';
65        cell2.className = 'address';
66        cell3.className = 'tel';
67        cell4.className = 'syumoku';
68
69        var HTML1 = '<input type="text" name="name' + counter + '" value="" size="10" maxlength="20" >';
70        var HTML2 = '<input type="text" name="address' + counter + '" value="" size="10" maxlength="20" >';
71        var HTML3 = '<input type="text" name="tel' + counter + '" value="" size="10" maxlength="20" >';
72        var HTML4 = '<select id="shumoku ' + counter + '">\n' +
73            '<option value="test0">0</option>\n' +
74            '<option value="test1">1</option>\n' +
75            '<option value="test2">2</option>\n' +
76            '<option value="test3">3</option>\n' +
77            '<option value="test4">4</option>\n' +
78            '<option value="test5">5</option>\n' +
79            '<option value="test6">6</option>\n' +
80            '<option value="test7">7</option>';
81        cell1.innerHTML = HTML1;
82        cell2.innerHTML = HTML2;
83        cell3.innerHTML = HTML3;
84        cell4.innerHTML = HTML4;
85    }
86</script>
87</body>
88</html>

投稿2017/08/24 14:45

s8_chu

総合スコア14731

hain

2017/08/26 06:32

ありがとうございます！まさにこの動作です！！！書いていただいた \n' + '<option value="test0">0</option>\n' + '<option value="test1">1</option>\n' + '<option value="test2">2</option>\n' + '<option value="test3">3</option>\n' + '<option value="test4">4</option>\n' + '<option value="test5">5</option>\n' + '<option value="test6">6</option>\n' + '<option value="test7">7</option>'; の部分は何か名前が(条件分岐やswitch分など)ついていたりしますでしょうか？今後調べるときに参考にさせていただきたいのですが…