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 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 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
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
详解python运行三种方式
2019/05/13 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
中考冲刺决心书
2014/03/11 职场文书
作风年建设汇报材料
2014/08/14 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书