javascript - jQuery 输入值备份和模糊替换

Question

我有一个只读的输入表，这些输入表是从数据库填充的。用户将能够双击单元格并激活它进行编辑。为了将新数据发送到数据库，用户必须按下按钮。用户还可以在激活一个单元格后双击另一个单元格，这是我的问题。如果焦点丢失到按钮以外的其他位置，我希望能够替换单元格的原始值。

I have this fiddle that represents my problem.

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);
    });            
});

Answer 1

在双击中，您可以执行以下操作来重置数据:

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

更新的 fiddle :http://jsfiddle.net/johnkoer/PnSdC/21/