JQueryに基づいて編集可能な表の特効を作成

最近プロジェクトをして、その中のプロジェクトの要求:表をクリックした后に直接编集することができて、车に戻ってあるいはマウスがページのその他の地方をクリックした后に编集して発効して、Escを押して编集を取り消すことができます
2人の仲間が2つのソリューションを提供していますが、どちらが適切か見てみましょう.
表をクリックして編集する方法

 
  
 //         body    onload   
  
 $(function() { 
  
     //     td   
  
     var tds = $("td"); 
  
     //    td       
  
     tds.click(function() { 
  
         //          
  
         var td = $(this); 
  
         //    td          
  
         var oldText = td.text(); 
  
         //       ，             
  
         var input = $(""); 
  
         //   td       input 
  
         td.html(input); 
  
         //             
  
         input.click(function() { 
  
             return false; 
  
         }); 
  
         //         
  
         input.css("border-width", "0"); 
  
         input.css("font-size", "16px"); 
  
         input.css("text-align", "center"); 
  
         //         td    
  
         input.width(td.width()); 
  
         //                
  
         input.trigger("focus").trigger("select"); 
  
         //                
  
         input.blur(function() { 
  
             var input_blur = $(this); 
  
             //           
  
             var newText = input_blur.val(); 
  
             td.html(newText); 
  
         }); 
  
         //       
  
         input.keyup(function(event) { 
  
             //      
  
             var keyEvent = event || window.event; 
  
             var key = keyEvent.keyCode; 
  
             //       
  
             var input_blur = $(this); 
  
             switch (key) 
  
                     { 
  
                 case 13://     ，           
  
                     var newText = input_blur.val(); 
  
                     td.html(newText); 
  
                     break; 
  
                 case 27://   esc ，    ，         
  
                     td.html(oldText); 
  
                     break; 
  
             } 
  
         }); 
  
     }); 
  
 }); 
  
 
 

2つ目のテーブルをクリックして編集する方法

 
  
 $(document).ready(function(){ 
  
     var tds = $("td"); 
  
     tds.click(tdClick); 
  
 }); 
  
 function tdClick(){ 
  
     var tdnode = $(this); 
  
     var tdtext = tdnode.text(); 
  
     tdnode.html(""); 
  
     var input = $(""); 
  
     input.val(tdtext); //    input.attr("value",tdtext); 
  
     input.keyup(function(event){ 
  
         var myEvent = event || window.event; 
  
         var keyCode = myEvent.keyCode; 
  
         if(keyCode == 13){ 
  
             var inputnode = $(this); 
  
             var inputtext = inputnode.val(); 
  
             var td = inputnode.parent(); 
  
             td.html(inputtext); 
  
             td.click(tdClick); 
  
         } 
  
         if(keyCode == 27){  //      ESC  
  
             $(this).parent().html(tdtext); 
  
             $(this).parent().click(tdClick); 
  
         } 
  
     }); 
  
     tdnode.append(input); 
  
     tdnode.children("input").trigger("select"); 
  
     //       ，       
  
     input.blur(function(){ 
  
         tdnode.html($(this).val()); 
  
         tdnode.click(tdClick); 
  
     }); 
  
     tdnode.unbind("click"); 
  
 } 
  
 
 

比較的に言えば、個人的には2つ目が好きですが、仲間たちはどんな意見ですか.伝言をください.