ボタンを押してテーブルを複製させたい

Question

タイトルの通りですが、「テーブル追加」のようなボタンを押すと、テーブルが追加されるような仕組みを作りたいです。

（内容は気にしないでください、例です）
「テーブル追加」ボタンを押すとまるっとQ1～選択肢4までのテーブルがQ1のテーブルの下に追加される感じにしたいです

調べたのですが、テーブルの行列追加削除ばかり出てきて、テーブルをまるっと追加、というのは探しきれなかったです。
出来ないのでしょうか？

JavaScriptで出来ると聞いたのですが、JavaScriptで実現できますか？
実現できればPHPでも何でも良いのですが…。

よろしくお願いします。

追記：テーブルの用途は簡単に言うとプロフィールに「趣味」とか「特技」とか追加とかの質問項目を追加していくイメージです。

Q1の次に、追加すると最初がQ2になっているととても嬉しいです。（が、そこまで贅沢は言いません；；）

Comments

[kei344]

質問文にHTMLを追加されてはいかがでしょうか。また、どのような用途のテーブルなのかによっては回答が微妙に変わる気がするのですが、具体的に何をしたいのかを追加されてはいかがでしょうか。

[yambejp]

Q1の下に同じQ1が来てよいのですか？Q2とかなにか工夫はいりますか？またテーブルの２列めは空白行でよいのでしょうか？

[退会済みユーザー]

用途については機密もあるので控えさせていただきます。テーブルを増やすことだけを教えていただければと思います、すみません。

[退会済みユーザー]

Q1の次にQ2が来るのが理想です。カウント変数か持ってなんとかならないかなと軽く考えていました。テーブルの2列目は空白で問題ないです（ユーザに記載してもらう仕様）

Answer 1

列や行を追加できるのですから、table要素ノードも当然追加できます。
基礎的なDOM APIなので、DOMを学んでください。

Node#cloneNode

• table要素ノードを挿入 - JSFiddle

<table>
  <tbody>
    <tr>
      <td>Q1.</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢1</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢2</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢3</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢4</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<input id="add-table" type="button" value="テーブル追加">

<script>
'use strict';
document.getElementById('add-table').addEventListener('click', function (event) {
  var table = event.target.ownerDocument.querySelector('table');

  table.parentNode.insertBefore(table.cloneNode(true), table.nextSibling);
}, false);
</script>

DOM Level 2 HTML

Q1の次にQ2が来るのが理想です。

HTMLTableElement, HTMLTableSectionElement, HTMLTableRowElement, HTMLTableCellElement の API を使用。

• table要素ノードを挿入 - JSFiddle
• DOM Level 2 HTML (ja)

<table class="foo">
  <tbody>
    <tr>
      <td>Q1.</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢1</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢2</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢3</td>
      <td></td>
    </tr>
    <tr>
      <td>選択肢4</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<input id="add-table" type="button" value="テーブル追加">

<script>
'use strict';
document.getElementById('add-table').addEventListener('click', function (event) {
  var table = event.target.ownerDocument.querySelectorAll('table.foo'),
      lastTable = table[table.length - 1],
      nextTable = lastTable.cloneNode(true),
      textNode = nextTable.tBodies[0].rows[0].cells[0].firstChild;

  textNode.data = textNode.data.replace(/\d+/g, function (numberString) { return ++numberString; });
  lastTable.parentNode.insertBefore(nextTable, lastTable.nextSibling);
}, false);
</script>

Re: ton-yuki さん

Comments

[退会済みユーザー]

早速ありがとうございます。
javascriptに関しては学ぶ時間もなく、ずぶのど素人でどこから勉強していいかわからない状態でした…
色々調べてみたのですが、コードしか載ってないところが多く解析が大変でした。
（が、成果は今週中に求められているので　汗）。
DOMですね、勉強してみます。

[think49]

コード上に登場したキーワードでWeb検索し、資料をあたって下さい。
私のコードでいえば、getElementById, parentNode, insertBefore, cloneNode, nextSibling, event.target, querySelector, ownerDocument
event.target.ownerDocument は資料も少ないでしょうから、とりあえずは document に置き換えても構いません(ownerDocument を使用した理由はありますが、そこを学習すると時間がかかりそうなので)。

[think49]

> Q1の次にQ2が来るのが理想です。
親記事に追記しました。

[退会済みユーザー]

ありがとうございます。
現在こちらで進めております。
コードも解析してなんとなくわかったのですが、画像にあるとおり、Q1の右側はテキストボックスにしています
で、データベースに登録したく、テキストのname属性をname1,name2…みたいに、Q1,Q2と同じように連番にしたいのです。
それに挑戦しましたが上手くいきませんでした。
追加質問になってしまい申し訳ないのですが、name属性を連番にすることは出来ますでしょうか？
必要であれば質問を立て直します。

個人的には、function (numberString) { return ++numberString; }のnumberStringの扱いがいまいちぱっとしませんでした
宣言なくても引数で変数宣言出来るのはわかりました。2回目以降、numberStringはカウンタを保持していると思うのですが、このfunction内のみで有効ですよね？また、2回目以降はnumberStringが新たに宣言されているわけではないですよね？

[退会済みユーザー]

属性に対してやってみたことは、setAttributeでname属性に"name"+count変数　でしたが、その前に指定するドキュメントをどう書くべきか（おそらくnextTableを使用するのでしょうが…）、カウンタをどう回して、変数をsetAttribute内にどう書くのかで悩んでいます。
全然見当違いだったらご指摘ください。

[think49]

HTMLに細かい指定があるのなら、kei344さんが指摘されているようにHTMLも質問文に載せるべきだと思います。
私は画像から想像して書いているだけですので、詳細は分かりませんし、細かい部分でズレが発生するのは仕方がないでしょう。
そうしたズレに柔軟に対応するのが難しいなら、尚更に細かい情報まで質問文に入れた方がよいです。

選択肢1,2,3,4には初めから連番のinput要素を記述しておけば良いように思えますが、Q1,Q2で重複したname属性値は許されない設計なのでしょうか。
ユニークにするなら「q1-1,q1-2,q1-3 -> q2-1, q2-2, q2-3」のような感じでしょうかね…。
1. "Q1." から数字を参照し、変数 number に格納
2. rows[i].cells[1].firstChild.name = 'q' + number + '-' + i;
コードを見て何のなくイメージするのではなくて、DOMを基礎から学習した上で各種関数、プロパティの使い方を覚えなければ、どこかで躓くとは思います。
https://developer.mozilla.org/ja/docs/DOM

[退会済みユーザー]

申し訳ありません。
当初はテーブルを増やすことさえ出来れば、あとは自分でなんとかなるだろうと考えていました。
そのためHTMLの細かい指定はしませんでした。
が、やってみて自分でなんとか出来なさそうだったので追加で質問させていただきました。
不快な思いをさせてしまい大変申し訳ありません。

基礎的な勉強をする時間が無いことと、今までの自身の経験上やってみてからのほうが身に入ったのでこうして質問させていただいています（キャッチフレーズには15分調べてわからなかったら、と書いてありますが3時間は少なくとも調べています）。
以後質問を控えるようにします。大変申し訳ありませんでした。
参照URLは学習します。

Answer 2

jQuery版です

https://jsfiddle.net/jgg3mhda/

<table border="1">
  <tr><td>Q<span class="qn">1</span>.</td><td>&nbsp;</td></tr>
  <tr><td>選択肢1</td><td>&nbsp;</td></tr>
  <tr><td>選択肢2</td><td>&nbsp;</td></tr>
  <tr><td>選択肢3</td><td>&nbsp;</td></tr>
  <tr><td>選択肢4</td><td>&nbsp;</td></tr>
</table>
<button>テーブル追加</button>
<script>
var qn = 1;
$('button').click(function() {
  var t = $('table:last');
  t.clone().insertAfter(t).find('.qn').text(++qn);
});
</script>

Comments

[退会済みユーザー]

ありがとうございます！すごくすっきりしていますね…！
うーん、どれを使うか悩みます…！

Answer 3

複製するのはcloneNodeを利用します。

<script>
window.onload=function(){
  var b=document.querySelector("input[type=button][value=テーブル追加]");
  b.addEventListener('click',function(){
    var t=document.querySelector("table").cloneNode(true);
    this.parentNode.insertBefore(t,this);
  });
}

</script>
<table border>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
</table>

<input type="button" value="テーブル追加">

Comments

[退会済みユーザー]

ありがとうございます、下の方のと似てますけど微妙に違いますね…むむ…
勉強します！