63


11

HTML:XHTMLの正しい方法で各TABLE ROWにFORMタグを持つことは可能ですか?

私はこれを次のように最もよく説明できます。

私はこれが欲しい(テーブル全体を `editmode`にして各行にボタンを保存する)。

        Id

Name

説明

どこに置いたらいいですか

タグ?

8 Answer


66


入力要素に "form"属性を使用して、これがHTML 5で可能であることを言及する価値があります。

Id

説明

JSがないことと独自の要素が使用されていることは明らかですが、残念ながらこれはIE10では機能しません。


54


私は同じような質問をしていて、 この回答に質問がありました。https://stackoverflow.com/questions/1893332/html-table-of-forms私のためにそれを解決しました。 (XHTMLかどうかはわかりませんが、HTML 5ブラウザでは機能します。)

あなたは他の要素にテーブルレイアウトを与えるためにcssを使うことができます。

.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

その後、次の有効なHTMLを使用します。

ヘビ


36


できません。 あなたの唯一の選択肢はこれを複数のテーブルに分割してそれの外側にフォームタグを置くことです。 テーブルを入れ子にすることもできますが、これはお勧めできません。

id

…​

私はテーブルを完全に削除し、divやspanのようなスタイルのHTML要素に置き換えます。


2


あなただけの ``を置く必要があります

``の前のタグ

タグと最後の ``。

Hopteそれは助けます。


2


検証はできず、Firefoxはコードを再配置しますが、Web開発者を使用しているときに[View generated source]に表示される内容は驚くかもしれません)。 私は専門家ではありませんが


の直前


そしてそれから


行末に確かに機能があります(Firefox、Chrome、IE7-9でテスト済み)。 たとえそれが作り出した検証エラーの数が新しい個人的なベスト/ワーストであったとしても、私のために働いて、! 結果として問題は見られず、私はかなりひどいスタイルのテーブルを持っています。 私がそうであるように、動的に生成されたテーブルを持っているかもしれないと思います。それが、テーブルの行を解析することが私たち人間にとって少し明白でない理由です。 そのため、基本的には、行の先頭でフォームを開き、行の末尾の直後にフォームを閉じます。


0


あなたがこのようなtr要素を歪めるフォームを追加しようとするならば


*レンダリング中のブラウザの中には、宣言の直後にフォームタグを閉じて、要素の外側に入力を残すものがあります。

このようなもの


この問題は複数のテーブルセルをワープする場合にも有効です

ステレオスコットが上で述べたように、入れ子になっているテーブルは推奨されない可能な解決策です。 テーブルを使用しないでください。


-1


実際、私はjavascript(実際にはjquery)を使って、テーブルの各行にあるフォームに問題があります。

Lothre1が言ったように、「レンダリングの過程にあるいくつかのブラウザは宣言の直後にフォームタグを閉じて、要素の外側に入力を残すでしょう」

これは私の入力フィールドをフォームの外側にするので、JAVASCRIPTのDOMを通して私のフォームの子にアクセスすることはできません。

通常、次のJQUERYコードは機能しません。

$( '#id_form:input')。each(function(){/ * action * /});
// this is supposed to select all inputS
// within the form that has an id ='id_form'

しかし上記の例はレンダリングされたHTMLでは動作しません。


私はまだきれいな解決策を探しています(ただし、DOMのウォーキングにTRの 'id’パラメータを使用すると、この特定の問題を解決できます)。

汚い解決策は(jquery用)になります:

$( '#tr_id:input')。each(function(){/ * action * /});
// this will select all the inputS
// fields within the TR with the id='tr_id'

上記の例はうまくいくでしょうが、それはFORMの代わりにTRを参照し、そしてそれはAJAXを必要とするので、実際には「きれい」ではありません…​

編集:jquery / ajaxでの完全なプロセスは次のようになります。

//init data string
// the dummy init value (1=1)is just here
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1 = 1';
// for each input in the TR
$( '#tr_id:input')。each(function(){

// DOMからフィールド名と値を取得しますvar field = $(this).attr( 'name'); var value = $(this).val();

//文字列を反復してデータを渡す//その結果、最終的にs / gは// "1 = 1のようになります。 data_str = '

;));

//Sendind fields datawith ajax
// to be treated
$ .ajax({type: "POST"、url: "target_for_the_form_t treatment"、data:data_string、success:function(msg){/ *リクエスト成功時のアクション* /}); ;));

このように、 "target_for_the_form_t treatment"はフォームが彼に送られたかのようにPOSTデータを受け取るべきです(post [1] = 1から出発しますが、この解決策を実行するには末尾を扱うことを推奨します

それでも私はこの解決策が好きではありませんが、私はdataTables jqueryプラグインのためTABLE構造を使わざるを得ません…​


-1


パーティーには遅刻しますが、これは私にとってとてもうまくいったし、コードはそれ自身を説明するべきです。

関数formAJAX(btn){var $ form = $(btn).closest( '[action]'); var str = $ form.find( '[name]')。serialize(); $ .post($ form.attr( 'action')、str、function(データ){// do stuff}); <script> </code> </pre>

<p> HTML:</p>

<pre> <code> <tr action = "scriptURL.php"> <td>フィールド1:<input type = "テキスト" name = "field1" /> </td> <td>フィールド2:<input type = "text" name = "field2" /> </td> <td> <button type = "button" onclick = "formAJAX(this)">更新</button> </td> </tr> </code> </pre>