HTMLとJavascriptを使ってテーブルの行を増やせるようにしたいです。

HTMLとJavascriptを使ってテーブルの行を増やせるようにしたいです。
現在のテーブルの行は二行なのですが任意でテーブルの行を追加できるようにしたいのですが、うまくいかず質問させていただきました。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6<body>
7<script type="text/javascript">
8  function coladd() {
9      var table = document.getElementById("index");
10      // 行を行末に追加
11      var row = table.insertRow(-1);
12      //td分追加
13      var cell2 = row.insertCell(-1);
14      // セルの内容入力
15      cell2.innerHTML = 'この行を削除しますか？<input type="button" value=削除" id="coladd" onclick="coldel(this)">';
16  }
17  function coldel(obj) {
18      // 削除ボタンを押下された行を取得
19      tr = obj.parentNode.parentNode;
20      // trのインデックスを取得して行を削除する
21      tr.parentNode.deleteRow(tr.sectionRowIndex);
22  }
23    </script>
24<input type="button" value="行を追加" id="coladd" onclick="coladd()">
25        
26<div id="options">
27   <table id="index">
28       <thead>
29           <tr>
30               <th>名前<span class="required">＊</span></th>
31               <td>URL</td>
32               <td>メモ</td>
33           </tr>
34        </thead>
35        <tbody id="items">
36            <tr class="item">
37                <th>
38                <textarea name="optionname1" class="optionname autobox"></textarea>
39                </th>
40                <td>
41                <textarea name="URL1" class="autobox box1 urlbox" placeholder="省略可"></textarea>
42                </td>
43                <td>
44                <textarea name="memo1" class="autobox box1" placeholder="省略可"></textarea>
45                </td>
46            </tr>
47            <tr class="item">
48                <th>
49                <textarea name="optionname2" class="optionname autobox"></textarea>
50                </th>
51                <td>
52                <textarea name="URL2" class="autobox box2 urlbox" placeholder="省略可"></textarea>
53                </td>
54                <td>
55                <textarea name="memo2" class="autobox box2" placeholder="省略可"></textarea>
56                </td>
57            </tr>
58    </table>
59</div>
60  </form>
61</body>

わかる方いらっしゃれば教えてください。
よろしくお願い申し上げます。

yambejp

2020/03/31 10:41

仕様がわかりません「行を追加」をおしたら再修行に追加されればよいのですか？ formの要素のnameは付け替えるのですか？現時点で追加を押すと削除を促すものが表示されるのもどうしたいのか分かりづらいです

m.ts10806

2020/03/31 10:51

質問は何でしょう。 https://teratail.com/help/question-tips

Mario_11

2020/03/31 10:52

「行を追加」を押したら最終行に行が追加されるようにしたいです。削除が表示されるのは任意で追加と削除ができるようにしたいためです。説明がわかりづらく申し訳ありません。

yambejp

2020/03/31 10:56 編集

一般に行を追加する場合既存の行のクローンを使うか空の行を挿入することになりますが、どうしたいのでしょうか？また行削除を可能にすると、いまのnameの付け方をしていると抜け番号ができそうですが大丈夫でしょうか？さらにいえばformが閉じタグしかないです。いまのままですと仮に入力タグをつくってもなにも意味がないでしょう

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

回答1件

ベストアンサー

こういうことかな。

js
1var idx = 3;
2function coladd() {
3  var table = document.getElementById("index");
4  var rowHTML = table.getElementsByClassName("item")[0].innerHTML;
5  // 行を行末に追加
6  var row = table.insertRow(-1);
7  row.innerHTML = rowHTML.replace( "1", idx);
8  idx++;
9  //td分追加
10  var cell2 = row.insertCell(-1);
11  // セルの内容入力
12  cell2.innerHTML = 'この行を削除しますか？<input type="button" value="削除" id="coladd" onclick="coldel(this)">';
13}
14function coldel(obj) {
15  // 削除ボタンを押下された行を取得
16  tr = obj.parentNode.parentNode;
17  // trのインデックスを取得して行を削除する
18  tr.parentNode.deleteRow(tr.sectionRowIndex);
19}