jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】


Posted in Javascript onAugust 01, 2016

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

运行效果截图如下:

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程序设计有所帮助。

Javascript 相关文章推荐
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 #Javascript
AngularJS ng-controller 指令简单实例
Aug 01 #Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 #Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 #Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 #Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 #Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
校运会入场式解说词
2014/02/10 职场文书
党员岗位承诺书
2014/03/25 职场文书
会计岗位说明书
2014/07/29 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
医生辞职信范文
2015/03/02 职场文书
爱心捐款活动总结
2015/05/09 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
安全生产培训心得体会
2016/01/18 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL