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

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery表格可编辑修改表格里面的数值/title meta name=' description ' content=' jquery表格特效制作jquery表格可编辑任意修改里面的数值/script type=' text/JavaScript ' src=' http : js/jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(' table TD ')).单击(function(){ if(！$(这个)。是('。输入){ $(这个).addClass('input ').html(“”输入类型=“文本”值='' $(这个).text() '' /').查找('输入')。焦点()。模糊(函数(){ $(此)).父项()。removeClass('input ').html($(this).val()| | 0)；});} }).悬停(function(){ $(this)).addClass(')悬停');}，function(){ $(this).removeClass(“”悬停');});});/script style type=' text/CSS '/* page style */body { font-family : ' Segoe UI '，Frutiger，Tahoma，Helvetica，' Helvetica Neue '，Arial，sans-serif；字号：62.5%；}表格{边框-折叠：折叠；}td，th { text-align : centerborder:1px实心# dddpadding:2px 5px}标题{ margin :0 0 . 5em font-weight : bold；}/*演示样式*/表格{宽度：500像素高度：200 px边距-左侧：30像素；}td，th { font-size :1.2 empadding:2px宽度：13%;} th {底色为： # F4F4；}标题{ font-size :1.5 em}表格{ float:left余量余量margin:40px 40px 0 0 }。演示{ width :500 pxmargin :0 auto }/* input */TD input { border :1 px纯橙色；背景：黄色；-web套件-边框-半径：5 px-moz-边界-半径：5 px边界半径：5像素；位置：绝对；padd :8 px 0；文本对齐：居中；宽度：60 px边距：-17px 0 0 4px；font-size :1.4 em} td.input { padding:0位置：相对；} td.hover { background: # eee }/style/head dydiv class=' demo '表标题2009年员工产品销售走势图/题注d tr TD/TD th范围=' col ' food/th范围=' col ' auto/th范围=' col ' home/th范围=' col '家具/th scope=' col ' kitchen/th scope=' col ' bath/th/tr/the d t body tr th scope=' row ' Mary/th TD 190/TD TD TD TD TD 160/TD TD TD TD TD 40/TD TD TD TD 120/TD/tr tr tr tr th scope=' row ' Tom/th td3更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery form操作技巧汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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