您当前的位置: 首页 > 前端教程 > JS教程 > jQuery点击表格单元格编辑内容

jQuery点击表格单元格编辑内容

作者:xiaoxiao 来源:未知 发布时间: 2014-07-30 11:50 点击:
!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 / titlejquery表格可编辑修

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点击表格单元格编辑内容"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(2)
100%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4