Question

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

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

更新了小提琴：http://jsfiddle.net/johnkoer/PnSdC/21/

Answer 2

这会有所帮助，但您需要为other than the button添加条件。

$('input').focusout(function() {
    element.toggleClass("active");
    element.attr('readonly',!element.attr('readonly')); 
});

jQuery输入值备份和替换模糊

2 个答案: