Chinaunix首页 | 论坛 | 博客

Web world

首页　| 　博文目录　| 　关于我

cici0208

  • 博客访问： 490469
  • 博文数量： 226
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2111
  • 用 户 组： 普通用户
  • 注册时间： 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文（226）

文章存档

2020年（2）

2019年（1）

2018年（3）

2017年（26）

2016年（57）

2015年（60）

2014年（77）

我的朋友
最近访客
推荐博文
相关博文
jQuery可编辑表格

分类： Web开发

2014-12-03 10:49:32

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery表格可编辑修改表格里面的数值</title>
  6. <meta name="description" content="jquery表格特效制作jquery表格可编辑任意修改里面的数值，是一种比较人性化的用户设计体验方式。jquery下载。" />

 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

  1. <script type="text/javascript">
  2. $(function(){    

    $('table td').click(function(){

  1.         if(!$(this).is('.input')){
  2.             $(this).addClass('input').html('+ $(this).text() +'" />').find('input').focus().blur(function(){
  3.                 $(this).parent().removeClass('input').html($(this).val() || 0);
  4.             });                    
  5.         }
  6.     }).hover(function(){
  7.         $(this).addClass('hover');
  8.     },function(){
  9.         $(this).removeClass('hover');
  10.     });
  11. });
  12. </script>
  13. <style type="text/css">
  14. /* page styles */
  15. body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
  16. table{border-collapse:collapse;}
  17. td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;}
  18. caption{margin:0 0 .5em;font-weight:bold;}
  19. /*demo styles*/
  20. table{width:500px;height:200px;margin-left:30px;}
  21. td, th{font-size:1.2em;padding:2px;width:13%;}
  22. th{background-color:#f4f4f4;}
  23. caption{font-size:1.5em;}
  24. table{float:left;margin:40px 40px 0 0;}
  25. .demo{width:500px;margin:0 auto;}
  26. /* input */
  27. 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;}
  28. td.input{ padding:0;position:relative;}
  29. td.hover{background:#eee;}
  30. </style>
  31. </head>
  32. <body>
  33. <div class="demo">
  34.     <table>
  35.         <caption>2009年员工产品销售走势图</caption>
  36.         <thead>
  37.             <tr>
  38.                 <td></td>
  39.                 <th scope="col">food</th>
  40.                 <th scope="col">auto</th>
  41.                 <th scope="col">household</th>
  42.                 <th scope="col">furniture</th>
  43.                 <th scope="col">kitchen</th>
  44.                 <th scope="col">bath</th>
  45.             </tr>
  46.         </thead>
  47.         <tbody>
  48.             <tr>
  49.                 <th scope="row">Mary</th>
  50.                 <td>190</td>
  51.                 <td>160</td>
  52.                 d>40</td>
  53.                 <td>120</td>
  54.                 <td>30</td>
  55.                 <td>70</td>
  56.             </tr>
  57.             <tr>
  58.                 <th scope="row">Tom</th>
  59.                 <td>3</td>
  60.                 <td>40</td>
  61.                 <td>30</td>
  62.                 <td>45</td>
  63.                 <td>35</td>
  64.                 <td>49</td>
  65.             </tr>
  66.             <tr>
  67.                 <th scope="row">Brad</th>
  68.                 <td>10</td>
  69.                 <td>180</td>
  70.                 <td>10</td>
  71.                 <td>85</td>
  72.                 <td>25</td>
  73.                 <td>79</td>
  74.             </tr>
  75.             <tr>
  76.                 <th scope="row">Kate</th>
  77.                 <td>40</td>
  78.                 <td>80</td>
  79.                 <td>90</td>
  80.                 <td>25</td>
  81.                 <td>15</td>
  82.                 <td>119</td>
  83.             </tr>        
  84.         </tbody>
  85.     </table>    
  86. </div>
  87. </body>
  88. </html>                                
阅读(419) | 评论(0) | 转发(0) |
0

上一篇：js:childNodes与firstChild、lastChild

下一篇：js事件监听

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6