本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery表格可编辑修改表格里面的数值</title> <meta name="description" content="jquery表格特效制作jquery表格可编辑任意修改里面的数值" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $('table td').click(function(){ if(!$(this).is('.input')){ $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){ $(this).parent().removeClass('input').html($(this).val() || 0); }); } }).hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); }); </script> <style type="text/css"> /* page styles */ 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;} /*demo styles*/ 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;} /* input */ 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;} </style> </head> <body> <div class="demo"> <table> <caption>2009年员工产品销售走势图</caption> <thead> <tr> <td></td> <th scope="col">food</th> <th scope="col">auto</th> <th scope="col">household</th> <th scope="col">furniture</th> <th scope="col">kitchen</th> <th scope="col">bath</th> </tr> </thead> <tbody> <tr> <th scope="row">Mary</th> <td>190</td> <td>160</td> <td>40</td> <td>120</td> <td>30</td> <td>70</td> </tr> <tr> <th scope="row">Tom</th> <td>3</td> <td>40</td> <td>30</td> <td>45</td> <td>35</td> <td>49</td> </tr> <tr> <th scope="row">Brad</th> <td>10</td> <td>180</td> <td>10</td> <td>85</td> <td>25</td> <td>79</td> </tr> <tr> <th scope="row">Kate</th> <td>40</td> <td>80</td> <td>90</td> <td>25</td> <td>15</td> <td>119</td> </tr> </tbody> </table> </div> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- JQuery 动态生成Table表格实例代码
- 基于jQuery实现表格的排序
- jQuery+json实现动态创建复杂表格table的方法
- jQuery实现的表格展开伸缩效果实例
- 基于jQuery实现表格内容的筛选功能
- jquery表格datatables实例解析 直接加载和延迟加载
- 基于jQuery实现表格的查看修改删除
- jQuery实现表格行和列的动态添加与删除方法【测试可用】
- jQuery实现的可编辑表格完整实例
- 详解jQuery简单的表格应用
