html tableの行ごとにformを作成

Question

HTML5にてtableの行ごとにFormを作成して、それぞれの値でSubmitで値をPOSTしたいと考えております。

まずは下記のようにHTMLを書いて実行した場合、正常に動作しました。

<table class="table table-bordered">
<!-- テーブルヘッダー -->
<thead>
	<tr class="active">
		<th>ID</th>
		<th>種類</th>
		<th>名前</th>
		<th>&nbsp;</th>
	</tr>
</thead>
<!-- テーブルボディー -->
<tbody id="tbody">
 <form action="/test/test.php" method="post" name="list" id="list">
	<tr>
	    <td class="table-text"><div><input type="hidden" name="id" value="1"> 1</div></td>
		<td class="table-text"><div><input type="hidden" name="type" value="猫">猫</div></td>
		<td class="table-text"><div><input type="hidden" name="name" value="にゃんすけ">にゃんすけ</div></td>
		<td><button class="btn btn-lg btn-primary" name="" value="cat" type="Submit">取得</button></td>
	</tr>
  </form>
  <form action="/test/test.php" method="post" name="list1" id="list1">
	<tr>
	    <td class="table-text"><div><input type="hidden" name="id" value="2">2</div></td>
		<td class="table-text"><div><input type="hidden" name="type" value="犬">犬</div></td>
		<td class="table-text"><div><input type="hidden" name="name" value="わんすけ">わんすけ</div></td>
		<td><button class="btn btn-lg btn-primary" name="" value="cat" type="Submit">取得</button></td>
	</tr>
  </form>
</tbody>
</table>

上記のように<tr>タグを<form>タグで括って予定通り送信したデータも分けて実行できたのですが
このtableの中身をJavascript(Jquery?)で追加していく形で下記のように書きました。

<table class="table table-bordered">
	<!-- テーブルヘッダー -->
	<thead>
		<tr class="active">
			<th>ID</th>
			<th>種類</th>
			<th>名前</th>
			<th>&nbsp;</th>
		</tr>
	</thead>
	<!-- テーブルボディー -->
	<tbody id="tbody">
	</tbody>
</table>
<button type="button" class="btn btn-lg btn-primary" onclick="test_append();"/>

function test_append(){
	$('#tbody').append('<form action="/test/test.php" method="post" name="list1" id="list1"></form>');
	$('#list1').append('<tr id=tr1></tr>');
	$('#tr1').append('<td class="table-text"><div><input type="hidden" name="id" value="1"> 1</div></td>');
	$('#tr1').append('<td class="table-text"><div><input type="hidden" name="type" value="猫">猫</div></td>');
	$('#tr1').append('<td class="table-text"><div><input type="hidden" name="name" value="にゃんすけ">にゃんすけ</div></td>');
	$('#tr1').append('<td><button class="btn btn-lg btn-primary" name="" value=![イメージ説明](2c98142d695b96d713beb0c6c7998474.png)type="Submit">取得</button></td>');
}

上記のように表示が崩れてしまいます。
他にも"</form>"を最後に括ったり、"<form>"と"<tr>"を同じ親の要素に並べてみたりやってみたのですが、期待の挙動になるものはありませんでした。
始めからHTMLにて記載しておく方法とJavaScriptにて追加していくやり方ではなぜ違う挙動になるのでしょうか？

また、私のように行ごとにデータをSubmitしたい場合どのように行うのが一般的なのでしょうか？
(そもそも行ごとにSubmitすることはよくないこと？)

勉強始めでわからないことばかりで的外れな質問かもしれませんが、よろしくお願い致します。

Answer 1

タグを入れ子にする(って表現でいいのかな?)のは手作業で書くしか…
行ごとにformを用意したいなら、yambejpさんが書かれてるように
tdの中におさめるのがいいと思います。
で、test.phpがなにをやってるのかわからないのでアレですが、
もし(例えば)idだけで済むんだったらidだけを渡すようにしますね。
自分だったら、formのmethodをGETにして、actionのURLに
必要なパラメタを指定するかなあ。

Answer 2

とりあえずtable、tbody、trなどにformを入れるのはやめましょう
tableを大きくformで囲うか、td内でformをつくってください
複数のtdの値を取りたいようですが、hiddenでやるなら
一つのtdにまとめれば済む話だと思います

Comments

[kondon]

ありがとうございます。
頂いた回答でできました！