質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

38256閲覧

html tableの行ごとにformを作成

kondon

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

3クリップ

投稿2016/11/11 11:19

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

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

html

1<table class="table table-bordered"> 2<!-- テーブルヘッダー --> 3<thead> 4 <tr class="active"> 5 <th>ID</th> 6 <th>種類</th> 7 <th>名前</th> 8 <th>&nbsp;</th> 9 </tr> 10</thead> 11<!-- テーブルボディー --> 12<tbody id="tbody"> 13 <form action="/test/test.php" method="post" name="list" id="list"> 14 <tr> 15 <td class="table-text"><div><input type="hidden" name="id" value="1"> 1</div></td> 16 <td class="table-text"><div><input type="hidden" name="type" value=""></div></td> 17 <td class="table-text"><div><input type="hidden" name="name" value="にゃんすけ">にゃんすけ</div></td> 18 <td><button class="btn btn-lg btn-primary" name="" value="cat" type="Submit">取得</button></td> 19 </tr> 20 </form> 21 <form action="/test/test.php" method="post" name="list1" id="list1"> 22 <tr> 23 <td class="table-text"><div><input type="hidden" name="id" value="2">2</div></td> 24 <td class="table-text"><div><input type="hidden" name="type" value=""></div></td> 25 <td class="table-text"><div><input type="hidden" name="name" value="わんすけ">わんすけ</div></td> 26 <td><button class="btn btn-lg btn-primary" name="" value="cat" type="Submit">取得</button></td> 27 </tr> 28 </form> 29</tbody> 30</table>

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

html

1<table class="table table-bordered"> 2 <!-- テーブルヘッダー --> 3 <thead> 4 <tr class="active"> 5 <th>ID</th> 6 <th>種類</th> 7 <th>名前</th> 8 <th>&nbsp;</th> 9 </tr> 10 </thead> 11 <!-- テーブルボディー --> 12 <tbody id="tbody"> 13 </tbody> 14</table> 15<button type="button" class="btn btn-lg btn-primary" onclick="test_append();"/> 16

javascript

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

イメージ説明

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2016/11/11 12:10

takasima20

総合スコア7458

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

投稿2016/11/11 11:49

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kondon

2016/11/15 04:58

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問