web-dev-qa-db-ja.com

テーブル内のフォーム

新しい行を追加して現在の行を更新するために、HTMLテーブル内にいくつかのフォームを含めています。私が得ている問題は、私の開発ツールでフォームを調べると、フォーム要素が開いた直後に閉じてしまうことです（入力などはフォームに含まれていません）。

そのため、フォームを送信してもフィールドが含まれません。

テーブルの行と入力は次のとおりです。

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

どんな助けでも素晴らしいでしょう、ありがとう。

htmlfirebughtml-tablehtml-form
213
Alex

フォームが table、tbodyまたはtrの子要素になることはできません 。それを配置しようとすると、ブラウザにフォームを移動させテーブルの後にします（テーブルの行、テーブルのセル、入力などの内容は残します）。

あなたはフォームの中にテーブル全体を持つことができます。テーブルセルの中にフォームを持つことができます。フォームの中にテーブルの一部を含めることはできません。

テーブル全体に1つのフォームを使用してください。次に、クリックした送信ボタンを使用してどの行を処理するか（すばやく）、またはすべての行を処理します（一括更新を許可）。

330
Quentin

マークアップを保存したい場合は、 "form"属性を使用してください。

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>
170
Vladimir

「編集可能なグリッド」、つまり任意の行をフォームにすることができるテーブルのような構造が必要な場合は、TABLEタグのレイアウトに似たCSS（display:table、display:table-row、およびdisplay:table-cell）を使用します。

テーブル全体をフォームでラップする必要はなく、またテーブルの見かけの行ごとに別々のフォームとテーブルを作成する必要もありません。

代わりにこれを試してください：

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

FORMでTABLE全体をラップすることの問題は、送信時にすべてのフォーム要素が送信されることです（おそらくそれは望ましいが、おそらくそうではないでしょう）。このメソッドを使用すると、各「行」にフォームを定義して、送信時にその行のデータのみを送信できます。

TRタグの周りにFORMタグを（またはFORMの周りにTR）ラップすることの問題は、それが無効なHTMLであるということです。 FORMは依然として通常通りに送信を許可しますが、この時点でDOMは壊れています。注：JavaScriptを使用してFORMまたはTRの子要素を取得してみてください。予期しない結果が生じる可能性があります。

IE7はこれらのCSSテーブルスタイルをサポートしておらず、IE8はそれを "標準"モードにするためにDoctype宣言が必要になることに注意してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Display：table、display：table-row、およびdisplay：table-cellをサポートする他のブラウザでは、TABLE、TR、およびTDタグを使用した場合と同じように、cssデータテーブルが表示されます。それらのほとんどはします。

display: table-header-group、table-row-groupおよびtable-footer-groupを使用して別のDIVに行グループをラップすることによって、THEAD、TBODY、TFOOTを模倣することもできます。

注：この方法では実行できない唯一のことはcolspanです。

この図をチェックしてください。 http://jsfiddle.net/ZRQPP/

32
Matthew