行の編集 - プロトタイプ

Question

私は、これの視覚的およびプログラム的な終了の両方について助けが必要です。わかりましたので、私はユーザーが彼の一意のIDに関連する特定の行を編集できるようにしています。ユーザーが編集をクリックすると、特定のIDを含むユーザー表のすべての行が表示されます（表のレイアウトは以下を参照）。さらに、ユーザーが表示するクラスごとに（この場合もuser_idフィールドに基づいて）チェックボックスが生成されます。

 
tbl_user 
user_id | user_name 
1  | Evan 

tbl_class 
user_id | class_id 
1    1 
1    2 

これは、編集フォームは現在、次のようになります。フォームが送信されると、私はボックスのいずれかの値がチェックしたかどうかを確認するつもりだった

 

| TEXT-BOX | For user_name 

| CHECKBOX value="1" | For EACH class found 
| CHECKBOX value="2" | For EACH class found 

。もしそうであれば、対応するtbl_class行を削除します（class_idが一致していればどこでも）。私はこの方法を使用して出会った

2つの問題：

1. チェックボックスがオフの場合、その値はフォームを付属していません（それはそう）
2. これはそれほどではありませんそれは迷惑であるという問題があります。これをやるより良い方法がありますか？私は本当にデザインが嫌いです。

上記のいずれかの質問にお答えいただきありがとうございます。

ありがとうございました！

エヴァン

Answer 1

http://postimage.org/image/e1sny3dcx/

私は、上記のリンクで画像をアップロードしました。 ユーザーの詳細の編集ページで、ユーザーはテキストボックスを使用してユーザー名を編集できます。 また、「使用可能なクラスID」は、複数の選択オプションを持つリストボックスに表示されます。「削除する選択されたクラスID」には、削除したいIDユーザーが含まれます。 「>>」ボタンを押すと、選択されたクラスIDが「利用可能なクラスID」リストボックスから「削除する選択クラスID」リストボックスに転送され、ボタン「< <」がその逆行を行います。 明示的に追加する新しいクラスIDを識別したい場合は、柔軟性があります。 いくつかのイベントをAvailable Class Ids Listに追加するだけです。 このデザインは、削除したいクラスIDであるフォーム要素を通して明確に識別できる利点があります。このアプローチは、user_idに関するclass_idの数が多い場合にお勧めします。

Answer 2

ユーザーがボックスのいずれかのチェックを外したとき、あなたは「classRemoved」のようなものの名前と未チェックしたクラスIDの値でフォームの隠し入力を作成するためにJavaScriptを使用することができます。そうすることで、フォームが送信されると、チェックされていないすべてのクラスのリストが表示されます。

クラスを削除するためのチェックボックスの代わりに、もっと優雅で現代的なやり方では、各クラスの横に赤色の「X」ボタンがあります。 "X"ボタンをクリックすると、クラスが削除されることを警告され、確認の結果、データベースにAJAX呼び出しが行われ、クラスをテーブルから削除した後、そのクラスを含むHTML行が非表示になります。ページを更新する必要はありません。私はより多くのユーザーフレンドリーな設計を考えるもので