0

読み取り専用の入力テーブルがあり、これらは DB から取り込まれます。ユーザーは、セルをダブルクリックしてアクティブ化して編集できるようになります。新しいデータを DB に送信するには、ユーザーはボタンを押す必要があります。ユーザーは、別のセルをアクティブにした後に別のセルをダブルクリックすることもできますが、それが私の問題です。フォーカスがボタン以外のものに失われた場合、セルの元の値を置き換えられるようにしたいと考えています。

私の問題を表すこのフィドルがあります。

HTML:

<table>
    <tr>
      <td><input id="1" type="text" value="Data 1" readonly="readonly"/></td>
      <td><input id="2" type="text" value="Data 2" readonly="readonly"/></td>
      <td><input id="3" type="text" value="Data 3" readonly="readonly"/></td>
      <td><input id="4" type="text" value="Data 4" readonly="readonly"/></td>
    </tr>
</table>

<button>Send</button>

JavaScript:

$(document).ready(function(){ 
                var element = null;
                $('input').dblclick(function(){ 
                    $(this).data("backup",$(this).val())                    
                    if(element == null){   
                        $(this).toggleClass("active");
                        $(this).blur(function(event){
                                        window.setTimeout(function(){
                                            if(!$('button').is(':focus')){ 
                                                $(this).val($(this).data("backup"));
                                                //alert("button has no focus");
                                            }  
                                        },100);  
                                    });                  
                        $(this).attr('readonly',!$(this).attr('readonly'));  
                        element = $(this);                           
                    }
                    else{                            
                        if(element.attr('id') == $(this).attr('id')){
                            $(this).toggleClass("active");
                            $(this).attr('readonly',!$(this).attr('readonly'));                                    
                            element = null;
                        } 
                        else{
                            element.toggleClass("active");
                            element.attr('readonly',!element.attr('readonly'));
                            $(this).toggleClass("active");
                            $(this).blur(function(event){
                                        window.setTimeout(function(){
                                            if(!$('button').is(':focus')){ 
                                                $(this).val($(this).data("backup"));
                                                //alert("button has no focus");
                                            }  
                                        },100);  
                                    });
                            $(this).attr('readonly',!$(this).attr('readonly'));
                            element = $(this); 

                        }                                                                                
                    }                        
                });
    $('button').click(function(){
        var value = $('tr').find('.active');
        var data = value.val();
        alert(data);
    });            
});
4

2 に答える 2

2

ダブルクリックの中で、これを実行してデータをリセットできます。

$('input').each(function () {
   if ($(this).data("backup"))
       $(this).val($(this).data("backup"));
});

更新されたフィドル：http：//jsfiddle.net/johnkoer/PnSdC/21/

于 2012-09-17T17:45:51.750 に答える
0

これは役に立ちますが、 の条件を追加する必要がありますother than the button。

$('input').focusout(function() {
    element.toggleClass("active");
    element.attr('readonly',!element.attr('readonly')); 
});
于 2012-09-17T17:35:37.887 に答える