如何将HTML表格单元格转换为可编辑的文本框

基本上,我希望用户单击表格并编辑文本.

这是我跟随的Js小提琴:

http://jsfiddle.net/ddd3nick/ExA3j/22/

您可以在下面看到我放在一起的代码.我跟着一个JS小提琴,想到在我的页面中使用它.

当我双击单元格时没有任何反应,我不知道为什么不工作.

请帮助找到遗漏的东西!

    









        

            

                
Code
                
Name
                
Email
                
Phone
            
        
        

            

                
001
                
Shahid
                
shahid@ssiddique.info
                
012-234-2432
            
        
    

 ssiddique 

Roko C. Bulj.. 5

首先包括jQuery库

比把你的脚本

你可能想看一下contenteditable Elements

这看起来很像这样:

$(function() {

  var $td = $("td");

  $td.on({
    "keypress" : function(e) {
      if (e.which !== 13) { // On Return key - "save" cell
        e.preventDefault();
        $(this).prop("contenteditable", false);
      }
    },
    "dblclick" : function() {
      $td.not(this).prop("contenteditable", false);
      $(this).prop("contenteditable", true);
    }
  });

});

td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }

Double-click on a table cell to edit
r


  

    

      
Code
      
Name
      
Email
      
Phone
    
  
  

    

      
000
      
Roko
      
roko@example.com
      
021-321-4321
    
    

      
001
      
Shahid
      
shahid@example.com
      
012-123-1234
    
  

$(function() {

  var $td = $("td");

  $td.on({
    "keypress" : function(e) {
      if (e.which !== 13) { // On Return key - "save" cell
        e.preventDefault();
        $(this).prop("contenteditable", false);
      }
    },
    "dblclick" : function() {
      $td.not(this).prop("contenteditable", false);
      $(this).prop("contenteditable", true);
    }
  });

});

td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }

Double-click on a table cell to edit
r


  

    

      
Code
      
Name
      
Email
      
Phone
    
  
  

    

      
000
      
Roko
      
roko@example.com
      
021-321-4321
    
    

      
001
      
Shahid
      
shahid@example.com
      
012-123-1234