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 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
深入理解vue中的$set
Jun 01 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Vue如何清空对象
Mar 03 Vue.js
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.MVC的模板标签系统(二)
2006/09/05 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
js综合应用实例简单的表格统计
2013/09/03 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
解读! Python在人工智能中的作用
2017/11/14 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python批量启动多线程代码实例
2020/02/18 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
《两只鸟蛋》教学反思
2014/02/10 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
降消项目实施方案
2014/03/30 职场文书
旅游文化节策划方案
2014/06/06 职场文书