web-dev-qa-db-ja.com

テーブル行の詳細情報を表示する

製品の基本情報を含むテーブルがあります。行をクリックすると、ユーザーが特定の情報を編集できるその製品の詳細が(同じページに)表示されます。製品の行をクリックすると展開される各製品の間に非表示のテーブル行を使用してみました。

その問題は、<form>要素はテーブル内では許可されていないので、これは私には適切ではないと感じています。この問題を解決するためのより良い方法があるはずですか?

3
CallumVass

2つのパターンが思い浮かびます:

行の編集をクリックするとポップアップモーダルフォーム:

enter image description here

または

行をクリックしたら、下の編集フォームを配置します。

enter image description here

データグリッドの下に読み込まれる「詳細情報」がユーザーに表示されない可能性があるため、ポップアップモーダルフォームの方が少し良いことをお勧めします。

3
drawtheweb

アイテムのリストの下にリストを表示するのに最適なデザインですか? 。提案の1つは、特にニーズに関連しているようです。

enter image description here

これはネストされたテーブル行を使用し、シナリオで必要なデータのインライン編集を可能にします。

(注:テーブルでの<form>の使用に関する制限は不明ですが、ASPにはインラインテーブル編集のサポートが組み込まれているため、おそらくそれを実装するための意味論的に妥当な方法がいくつかあるに違いありませんが、UXの観点からは、それは説得力のある要件ではありません。

1
Sam Blake

おそらくテーブル内で仕切りを使用していますか?それが必ずしも「修正」であるかどうかはわかりませんが、それは確かに試す価値のあるオプションです。

0
Cora

テーブル上でモーダルウィンドウを使用する場合の1つの問題は、テーブルの情報が後ろにあり、ユーザーが必要に応じてそれを表示できない可能性があることです。

3列しか編集できない場合は、インライン編集をお勧めします。 enter image description here

Designing Web Interfaces を参照してください

0
MorVimmer