テーブルに編集可能な新しい行を作成する

Question

ajaxとテーブルの動的行を使用して、データベースに詳細を追加しようとしています。

----

{お客様：ドロップダウンメニュー} | {説明：テキストエリア} |

は、新規顧客を追加、削除

---

ユーザーは、それが利用可能なすべての顧客のドロップダウンメニューを示しクリックします。あなたが離れてクリックすると、選択した顧客名が表示されます（ドロップダウンメニューではありません）

同様に、テキストエリアの説明を編集できるようにするにはクリックしますが、あなたは今入力しました。 （テキスト領域のアウトラインではありません）

新規顧客ボタンを追加すると、新しい空の行が作成されます。

これを開始するのに役立つライブラリや例はありますか？

最近このアプリケーションを見ました。このアプリケーションでは、ajaxと動的HTMLを介して新しい項目/行を追加することができました。

Answer 1

jQueryを使って簡単に操作できるはずです（セレクタ、イベント&のドキュメントをご覧ください）。たとえば、ドロップダウン

<span id="customer-name"></span> 
<select name="customer-list" id="customer-list"> 
    <option class="name" value="cust-1">Frank Frankson</option> 
    <option class="name" value="cust-2">John Johnson</option> 
</select> 

とjQueryのために：（AJAXポストまたは何でも）必要であれば、その関数で

$('.name').click(function(){   
    $('#customer-name').text($(this).text()); 
    $('#customer-list').hide(); 
}); 

あなたはオプションの要素値で何かを行うことができます。

テキスト領域の記述を変更するためのプリンシパルが同じになります（あなたがテキストエリアの外にテキストをつかむことができ、divの&に追加するテキストエリアを隠し、彼らは再び編集する必要がある場合は、単にテキストエリア&非表示を示し、 div）

Answer 2

jQueryを使用します。

は、インプレース編集を使用Jeditableについてtokenizing autocomplete plugin for jQuery

を使用してください。

私はドロップダウンから遠ざかっていますが、ほとんどの場合、メニューに入っていないか、長いオプションリストから選択すると、デザインは悪いです。うまくいけば長いかもしれない顧客のリストのようなもののために、それはUIコンポーネントのひどい選択です。

ドロップダウンを使用するのが実際には意味があるのは、オプションのリストが短いことです。とがよく知られています。それは受け入れられるためには、たぶん変化することはめったにありませんし、アイテムが10個以下であり、頻繁に使用される（よく知られている）オプションのリストである必要があります。ドロップダウンは痛いです。

Answer 3

このような機能が見られるほとんどのサイトでは、スタイリングでそれを実現しています。テキスト入力ボックスをプレーンテキストのようにスタイルすることができます（境界線を削除し、背景色を透明に設定）。入力は、（集中）にスタイルの変更をクリックされた場合：

<style> 
    .blurredText { border: none; background-color: transparent; } 
</style> 
. . . 
<input type="text" class="blurredText" value="Click me to edit" 
    onfocus="this.className=''" 
    onblur="this.className='blurredText'"/> 

選択コントロールがCSSに悪名高い耐性があるので、同じように、しかし、難しいかもしれ選択をスタイリング。 Dave提案のメソッドを引き続き使用できます。