web-dev-qa-db-ja.com

HTML：XHTMLの有効な方法で、各テーブル行にFORMタグを含めることは可能ですか？

これは次のように説明できます。

これが必要です（editmodeのテーブル全体とすべての行の保存ボタン）。

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="1" /></td>
        <td><input type="text" name="name" value="Name" /></td>
        <td><input type="text" name="description" value="Description" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="2" /></td>
        <td><input type="text" name="name" value="Name2" /></td>
        <td><input type="text" name="description" value="Description2" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <!-- and more rows here ... -->
</table>

どこに<form>タグ？

htmlxhtml
69
Ropstah

できません。唯一のオプションは、これを複数のテーブルに分割し、その外側にフォームタグを配置することです。テーブルをネストすることもできますが、これはお勧めできません。

<table>
  <tr><td><form>
    <table><tr><td>id</td><td>name</td>...</tr></table>
  </form></td></tr>
</table>

テーブルを完全に削除し、divやspanなどのスタイル設定されたhtml要素に置き換えます。

38
stereoscott

入力要素に「フォーム」属性を使用して、HTML5でこれが可能であることに言及する価値があります。

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form1" type="text" name="name" value="Name" /></td>
        <td><input form="form1" type="text" name="description" value="Description" /></td>
        <td><input form="form1" type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form2" type="text" name="name" value="Name" /></td>
        <td><input form="form2" type="text" name="description" value="Description" /></td>
        <td><input form="form2" type="submit" value="Save" /></td>
    </tr>
</table>

JSがなく、元の要素を使用している点は問題ありませんが、残念ながらIE10では機能しません。

71
tjbp

同様の質問がありました この回答 質問中 HTML：フォームの表？ 解決しました。 （XHTMLかどうかはわかりませんが、HTML5ブラウザーで動作します。）

Cssを使用して、テーブルレイアウトを他の要素に与えることができます。

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

次に、次の有効なhtmlを使用します。

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value="4" /></div>
    </form>
</div>
58
Alexx Roche

検証はできませんが、Firefoxはコードを再配置しますが（Web Developerを使用するときに「生成されたソースを表示」に表示されるものは驚くかもしれません）。私は専門家ではありませんが、

<form action="someexecpage.php" method="post">

すぐ先

<tr>

そして次に

</tr></form>

行の最後には確かに機能があります（Firefoxでテスト済み、ChromeおよびIE7-9）。検証エラーの数が新しい個人的なベスト/結果として見られる問題はなく、私はかなり重いスタイルのテーブルを持っています。私と同じように、動的に生成されたテーブルを持っているかもしれないので、テーブル行の解析は私たち人間にとって少し自明ではありません。基本的に、行の先頭でフォームを開き、行の終わりの直後に閉じます。

3
Geoff Kendall

<form ... >タグの前に<table>タグと</form> 最後に。

それが役立つことを望みます。

1
Timothée Martin

このようなtr要素をワープするフォームを追加しようとすると

<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>

レンダリング処理中の一部のブラウザは、宣言が要素の外部に入力を残した直後にformタグを閉じます

このようなもの

<table>
    <form></form>
    <tr>
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

この問題は、複数のテーブルセルをワープする場合に引き続き有効です。

上記のstereoscottが述べたように、テーブルのネストは解決策として推奨されていません。テーブルの使用は避けてください。

0
Lothre1

実際、テーブルの各行にあるフォーム、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では機能しません。

<table>
    <form id="id_form"></form>
    <tr id="tr_id">
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

私はまだきれいな解決策を探しています（ただし、TR 'id'パラメーターを使用してDOMを調べると、この特定の問題が修正されます）

汚い解決策は次のとおりです（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(){

 //retrieve field name and value from the DOM
 var field = $(this).attr('name');
 var value = $(this).val();

 //iterate the string to pass the datas
 // so in the end it will render s/g like
 // "1=1&field1_name=value1&field2_name=value2"...
 data_str += '&' + field + '=' + value; 


});

//Sendind fields datawith ajax 
// to be treated 
$.ajax({
 type:"POST",
 url: "target_for_the_form_treatment",
 data:data_string,
 success:function(msg){
    /*actions on success of the request*/
 });
});

このように、「target_for_the_form_treatment」は、フォームが彼に送信されたかのようにPOSTデータを受信する必要があります（post [1]以外= 1ですが、このソリューションを実装するには、代わりにdata_strの末尾の「＆」）。

それでもこのソリューションは好きではありませんが、dataTables jqueryプラグインのためにTABLE構造を使用することを余儀なくされています...

0
renard