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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
javascript中的this详解
Dec 08 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
webpack打包js的方法
Mar 12 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
编写PHP的安全策略
2006/10/09 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
Jquery ui css framework
2010/06/28 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python实现图片批量剪切示例
2014/03/25 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
使用Python pip怎么升级pip
2020/08/11 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
应聘会计求职信
2014/06/11 职场文书
上课迟到检讨书
2015/05/06 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
同事离别感言
2015/08/04 职场文书
Python实现Hash算法
2022/03/18 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
MySQL自定义函数及触发器
2022/08/05 MySQL