テキストボックスに値を表示するjqueryヘルプ

Question

私のアプリケーションでは、ユーザーはグリッドを開き、オプションを選択します。ユーザーが「質問の追加」ボタンをクリックすると、オプションが選択された後、テーブルに新しい行が追加され、テキストボックスにオプション値が表示されます。

ここで、ユーザが自分の気持ちを変えて、自分がオプション値を変更したかったテーブル行に変更したいとすると、ユーザはテーブル行内の "Open Grid"リンクをクリックしてグリッドを開くことができます。別のオプション。唯一の問題は、選択したオプションがテーブル行のテキストボックスに表示されるべきであることですが、そうではなく、ユーザーが元々オプションを選択した上部のテキストボックスに表示されることです。

ユーザーがテーブル行内のオプションを変更した場合、行内のテキストボックスに値が表示され、テキストボックスは表示されないようにするにはどうすればよいですか？あなたを助けるために私のバイオリンでフォローする

ステップ：

1. を開き、新しい行がされている見ることができる「質問を追加」上のグリッドと選択オプション「3」

2. クリック、テキストボックスで選択したオプションが表示されます。

3. 新しい行に「Open Grid」リンクをクリックし、オプション「5」を追加しました。テーブル行のテキストボックスにはまだ "3"が表示されていますが、上のテキストボックスを見ると "5"と表示されます。一番上のテキストボックスは "5"に変更すべきではなく、テーブル行にあるテキストボックスでなければなりません。あなたは私が何を意味するか見ることができますし、あなたのアイデアをテストするためにそれを使用できるように

すべてのhere

Answer 1

まずをクリックし、jsfiddleを使って、あなたは後にマッチした要素のセットを非表示にする必要はありません。それらを消滅させる。その後、私は個人的にコードがより良いかもしれないと思う

$('body').on('click', function() { 
    $('#optionTypeTbl').fadeOut('slow'); 
    $('#optionTypeTbl').hide(); 
}); 

： を参照します。基本的にはオプションテーブルを固定要素として使用します。しかし、実際には、スクリプト内の変数にそれを残してフェージングが終わると、それを削除することもできます。ユーザーが[Open Grid]をクリックすると、適切な場所に追加されます。 （私はまだので、私はすぐにサンプルを提供することができません。私はそれにいくつかの時間を与え、あなたのコード全体を経ていない。）その後、代わりに

$('#optionTypeTbl input').click(function() { 
    $(".gridBtns").removeClass("gridBtnsOn"); 
    $(this).addClass("gridBtnsOn"); 
    // THIS FOLLOWING LINE 
    $('.box INPUT').val($(this).val()); 
    $('#optionTypeTbl').hide(); 
}); 

を使用しての、あなたが今、あなたのオプションのテーブルを作っているので、クリック[開くグリッド]リンクの親の子は、あなたがこのようclosestを使用してその親を参照することができます。正直に言うと

$(this).closest('tr').find('.box input').val($(this).val()); 

、私はあなたの偉大な部分を変更することなく、あなたの問題を解決することができませんでした動作。自分のバージョンのコードを修正するのに少し時間が必要です。

EDITH：

わかりましたので、私はあなたのフィドルに勤務し、作業スニペットを思い付いてきました。 Hereあなたは行く！