1、效果及功能说明

表格特效制作jquery表格可编辑任意修改里面的数值，是一种比较人性化的用户设计体验方式

2、实现原理

通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把，所有值放到当前的input里面。

主要的方法

if(!$(this).is('.input'))

//当点击了input后   

$(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function()

//点击以后跳出一个input类，在里面输入值，当失去焦点后把值都发给原先的那个input里面   

$(this).parent().removeClass('input').html($(this).val() || 0

//当失去焦点后把input类给删除掉让跳出来的input消失

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">

$(function(){

//定义方法

    $('table td').click(function(){

    //定义点击事件

        if(!$(this).is('.input')){

        //如果当前是.input类

            $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){

            //当前添加类获得元素新插入一个input通过遍历获得input定义伪类，当失去焦点以后在定义一个方法

                $(this).parent().removeClass('input').html($(this).val() || 0);

                //当前查找每个元素，删除掉input类获得input所有元素的值并且和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代码实现表格内容可编辑修改的更多相关文章

  1. mySQL用代码添加表格内容 删除数据方法

    通过代码对表格内容操作: 1.添加数据insert into Info values('p009','张三',1,'n001','2016-8-30 12:9:8') ; 给特定的列添加数据inser ...

  2. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  3. 使用NPOI读取Excel表格内容并进行修改

    前言 网上使用NPOI读取Excel文件的例子现在也不少,本文就是参考网上大神们的例子进行修改以适应自己需求的. 参考博文 http://www.cnblogs.com/restran/p/38894 ...

  4. UI-grid 表格内容可编辑（enableCellEdit可指定列编辑）

    在网上搜索了很多关于UI-Grid的问题 很遗憾好少啊啊啊 不过有API还是比较欣慰的 官方API:UI Grid 还有一位大佬的翻译的中文API:angularjs ui-grid中文api 行编辑 ...

  5. 一百零四、SAP中ALV事件之十六，让ALV表格能点击修改

    一.上一篇我们写到生产的ALV表格,但是表格内容不支持修改,如果我们需要修改下图的数量,需要怎么操作呢 二.代码如下,设置 ls_fieldcat-edit = 'X'.   "允许编辑. ...

  6. table表格实现点击修改 PHP同步数据库 排序

    最近几天在做一个网站,牵扯到一个导航管理的功能!领导说不用作,可是由于自己自作主张,搞了1天的功能.领导说这个导航管理就是不用做!容易牵扯出好多问题来!估摸是客户小的原因! 没办法就把我1天的劳动荒废 ...

  7. JQuery DataTables Editor---页面内容修改&&数据库信息修改 （2）

    接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...

  8. JQuery DataTables Editor---页面内容修改&&数据库信息修改 （1）

    我们使用jquery datatables 不光是为了对数据的展示,同时需要对数据惊行简单的操作,这个操作分为两个部分:1.页面内容的修改:2.对应的数据库信息的修改. 前一篇博文介绍了页面级的操作, ...

  9. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

随机推荐

  1. 从解决一个java.lang.NoSuchMethodError想到的

    今天在发布系统部署一个web app的时候,发现应用服务器(tomcat 7.0.26)不能正常启动,于是远程登陆到服务器上查看应用服务器的启动日志,在tomcat_home的logs/localho ...

  2. Luogu4885 灭顶之灾

    显然1的位置确定了整个矩阵,每一段连续的数即是对该位置的限制.化一下式子可以发现是一段区间或一段区间的补集,最后要求的是他们的交.看起来不太好求,于是转为求补集的并,那么排个序就完了. #includ ...

  3. P4645 [COCI2006-2007 Contest#3] BICIKLI

    题意翻译 给定一个有向图,n个点,m条边.请问,1号点到2号点有多少条路径?如果有无限多条,输出inf,如果有限,输出答案模10^9的余数. 两点之间可能有重边,需要看成是不同的路径. 题目描述 A ...

  4. python配合Fiddler获取windows app登录时生成cookie实例

    工具Fiddler/python3 打开Fiddler,清空一下Fidder里面的请求记录 打开app,进行登录,注意Fiddler里的请求变化 在弹出app登录的时候Fiddler里已经有了四个请求 ...

  5. 【刷题】BZOJ 1926 [Sdoi2010]粟粟的书架

    Description 幸福幼儿园 B29 班的粟粟是一个聪明机灵.乖巧可爱的小朋友,她的爱好是画画和读书,尤其喜欢 Thomas H. Cormen 的文章.粟粟家中有一个 R行C 列的巨型书架,书 ...

  6. 【BZOJ2006】【NOI2010】超级钢琴（主席树，优先队列）

    [BZOJ2006]超级钢琴(主席树,优先队列) 题面 BZOJ 题解 既然是一段区间 首先就要变成单点 所以求一个前缀和 这个时候贪心很明显了: 枚举每一个点和可以和它组成一段的可行的点 全部丢进一 ...

  7. 《Linux内核设计与实现》第18章读书笔记

    第十八章 调试 一.调试开始前的准备 1.准备开始 bug 藏匿bug的版本 相关内核代码的知识 成功调试的关键在于能否将错误重现 2.内核中的bug 其产生原因无数,表象变化也多种多样.从隐藏在源代 ...

  8. 理解 OAuth 2.0

    理解OAuth 2.0 http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 一.简介 OAuth是一个关于授权(authorization)的开 ...

  9. 关于nodejs的几个干货（读中文文件编码问题/发送邮件/定时任务）

    关于nodejs读取中文文件真是折腾了不少时间,网上各种方案,最后没有一个适用我,好在解决了. 下面的三个知识点都是从项目中抽出的,要单独运行脚本的话需要用全局模式来安装模块,比如安装中文转换模块(后 ...

  10. Chapter11(关联容器)--C++Prime笔记

    1.关联容器: map关键字-值对,经常被称为关联数组 set中每个元素只有一个关键字,即只保存关键字的容器 ①允许重复的关键字的容器名字都包含multi. ②不保持关键字顺序存储的容器的名字都以但粗 ...