在表格(td)标签中或div中点击编辑按钮，在原来的位置显示出input输入框进行编辑操作(或者让标签变成可编辑内容)

这两天项目刚上线，新版本的需求项目部还没搞出来，瞄了一眼需求中有个待定的原型图是点击编辑的时候在原来位置出来input输入框进行编辑，刚好这个功能我没做过，我百度百度写了几个demo，这样要是到时候真的要做这个需求，直接复制粘贴就好了

1.首先，第一种效果是编辑写在一个单独的td中，点击编辑，表格的一整行都显示input标签，也有一种是点击编辑，只有编辑前一个兄弟显示input标签。

效果如图所示：

两种需求的代码在下面有注释，可以根据自己需求选择

代码如下：

    
    
    
    


    

      

        

          
设备名称
          
ip地址
          
操作
        
      
      

        

          
LENOVO_PC
          
192.168.0.1
          
编辑
        

         

          
LENOVO_PC
          
192.168.0.1
          
编辑
        
      
    
    

2.第二种效果是编辑按钮和和要编辑的内容在一个td中，点击编辑时修改

效果如下：

代码：

    
    
    
    


    

      

        

          
设备名称
          
ip地址
          
使用人
        
      
      

        

          
LENOVO_PC
          
192.168.0.1
          
哈哈哈[编辑] 
        

        

          
LENOVO_PC
          
192.168.0.1[编辑]
          
小菜鸟
        
      
    
    

3.如果不是表格，是div，写法也差不多

效果如下：

代码如下：

  
  
  
  


  

    
设备名称:
    
LENOVO_PC[编辑]
    
设备ip:
    
192.168.0.1[编辑]
    
使用人:
    
哈哈哈[编辑]
    
所属部门:
    
研发部[编辑]
  
 
  

最后还有一种简单的方法，就是给标签添加一个属性contenteditable=”true”就可以了。 

哈哈哈

哈哈哈

其实代码差不多都一样，根据自己不同的需求进行修好就好了。