js ボタン押下で要素追加

Question

お世話になります。

現在タイムスケジュールを設定できるような処理を作成中で、初期表示として以下のようにHTMLに記述しています。

<tr class="time-group">
   <td>グループ1．名称<input type="text" id="group-name1">
        開始<select id="start-hour-group1"></select> : <select id="start-min-group1"></select>
        終了<select id="end-hour-group1"></select> : <select id="end-min-group1"></select>
  </td>
</tr>

タイムスケジュールを複数登録できるようにしていきたいのですが、HTMLに記述して固定で複数の入力欄を設けているのが現状です。それをjs側の処理として追加ボタンを押下時にHTMLでの記述のような要素を一行分追加して以下のようにしたいのですがjs側でどうやって作ればよいのでしょうか？

<tr>
   <td>グループ1．名称<input type="text" id="group-name1">
        開始<select id="start-hour-group1"></select> : <select id="start-min-group1"></select>
        終了<select id="end-hour-group1"></select> : <select id="end-min-group1"></select>
  </td>
</tr>
<tr>
   <td>グループ2．名称<input type="text" id="group-name2">
        開始<select id="start-hour-group2"></select> : <select id="start-min-group2"></select>
        終了<select id="end-hour-group2"></select> : <select id="end-min-group2"></select>
  </td>
</tr>

Answer 1

ボタンをクリックされたタイミングで追加したいidを生成し、

$("#希望するID").length

が0でないなら既にそのIDは存在するので生成し直し
でどうですか

###追記
よくみるとgetElementByIdなどを使うという事はjquery等使ってないのですね。。。jquery使わないコードでさきほどのidの確認もしたものを追記します。

<table id="table">
<tbody>
<tr class="time-group">
   <td>グループ1．名称<input type="text" id="group-name1">
        開始<select id="start-hour-group1"></select> : <select id="start-min-group1"></select>
        終了<select id="end-hour-group1"></select> : <select id="end-min-group1"></select>
  </td>
</tr>
</tbody>
</table>

<button onClick="addline();">登録</button>

<script>
var id=1;
function addline(){

  while(document.getElementById("group-name"+id))
    id++;

  table = document.getElementById("table");
  row = table.insertRow(-1);
  row.setAttribute("class","time-group");
  row.innerHTML = '<td>グループ1．名称<input type="text" id="group-name'+id+'">\n'+
                  '開始<select id="start-hour-group1"></select> : <select id="start-min-group1"></select>\n'+
                  '終了<select id="end-hour-group1"></select> : <select id="end-min-group1"></select>';
}
</script>

Comments

[coko1]

ボタン押下時に一行分の要素を追加したいのですがそちらは同実装するのがよいのでしょうか？

[hiim]

追記しました

Answer 2

jqueryを覚えるとラクですね。

行をコピーして、最後の行の次に追加。

ネームやらアイディーやらを末尾に1足したり、書き換えたり…。

使い方覚えるしかないですね。

Answer 3

そもそも id ではなく name では？

<tr class="time-group">
   <td>グループ1．名称<input type="text" name="group-name[]">
        開始<select name="start-hour-group[]"></select> : <select name="start-min-group[]"></select>
        終了<select name="end-hour-group[]"></select> : <select name="end-min-group[]"></select>
  </td>
</tr>

Comments

[coko1]

jsでgetElementByIdで要素を取得していたので．．．

[kei344]

name を設定しないとPOST出来ないと思いますが、そういう使い方ではないのですね。

また、getElementByIdをどう使っているかによって、提示する手段も変わってきますので、JavaScriptも追記されることをお勧めします。