jQuery实现点击表格单元格就可以编辑内容的方法

本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
table{border-collapse:collapse;}
td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;}
caption{margin:0 0 .5em;font-weight:bold;}

table{width:500px;height:200px;margin-left:30px;}
td, th{font-size:1.2em;padding:2px;width:13%;}
th{background-color:#f4f4f4;}
caption{font-size:1.5em;}
table{float:left;margin:40px 40px 0 0;}
.demo{width:500px;margin:0 auto;}

td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;padding:8px 0;text-align:center;width:60px;margin:-17px 0 0 4px;font-size:1.4em;}
td.input{ padding:0;position:relative;}
td.hover{background:#eee;}




  

    
2009年员工产品销售走势图
    

      

 

 
food
 
auto
 
household
 
furniture
 
kitchen
 
bath
      
    
    

      

 
Mary
 
190
 
160
 
40
 
120
 
30
 
70
      
      

 
Tom
 
3
 
40
 
30
 
45
 
35
 
49
      
      

 
Brad
 
10
 
180
 
10
 
85
 
25
 
79
      
      

 
Kate
 
40
 
80
 
90
 
25
 
15
 
119
      
    
  

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。