2016-11-02 15 views
0

私はいくつかの情報を持つテーブルを表示するアプリケーションを構築しています。私は、ユーザーがセルをクリックして、その下に行をスライドさせてアクションができるフォームを含むようにしたい。フォームの行をテーブルに入れる最も良い方法は何ですか?

ので、それは次のようになります。

<table> 
    <tr> 
    <td>some info 1</td> 
    <td>some info 2</td> 
    <td>some info 3</td> 
    </tr> 
    <tr> 
    <form> some form that spans the entire row + submit button </form> 
    </tr> 
</table 

フォームが非表示とフォームが下にスライドしますセルの一つをクリックすることであろう。

私が直面している問題は、フォームを表の行としてレンダリングできないということです。私はそれができないと言う複数の情報源を読んだ。私はそれを単一のセルの内部にレンダリングすることができますが、フォームは大きすぎます。

私が読んだ解決策の1つは、テーブル全体をフォームタグで囲み、複数の送信ボタンがあることです。これは私にとっては悪い習慣のように感じ、私はそれがうまくいくかどうかはわかりません。

私はdivを使ってテーブルを再作成してみましたが、すべての解決策では全く同じ問題がある 'display:table'が使用されています。

これを処理する最善の方法は何ですか?

+0

「フォームが大きすぎます」とはどういう意味ですか?何千ものテーブル行を扱っていますか? –

+0

いいえ、私はフォームが複数の行にまたがることなく1つの表のセルにうまく収まらないことを意味します。それは働くので、ひどく見えます。私はそれが1つのセルだけでなく、行全体の幅にまたがるようにしたい。 – Mischa

答えて

1

<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <form action=""> 
 
    <td colspan="3"><input type="text"></td> 
 
    </form> 
 
    </tr> 
 
</table>

あなたはCOLSPANを使用して試してみました(私はRuby on Railsでを使用していますか)?

0

私の助言は、あなたのプロジェクトで可能ならテーブルをdivsに置き換えることです。これを簡単にするためにブートストラップ(https://getbootstrap.com/examples/grid/)を使うことができます。 理由: 1.クリーナーコード 2.テーブルの生/セルよりも簡単にdivを操作できます。 3. divと同じくらい速く複製できます。 あなたの意思決定よりも試してみてください。

関連する問題