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. 微信小程序入门一: 简易form、本地存储

    实例内容 登陆界面 处理登陆表单数据 处理登陆表单数据(异步) 清除本地数据 实例一: 登陆界面 在app.json中添加登陆页面pages/login/login,并设置为入口. 保存后,自动生成相 ...

  2. [转帖]紧急预警：Globelmposter3.0变种来袭，多行业中招

    紧急预警:Globelmposter3.0变种来袭,多行业中招 https://www.csdn.net/article/a/2018-09-04/15959658   CSDN 转载深信服...   ...

  3. 如何在DBGrid中能支持多项记录的选择

    When you add [dgMultiSelect] to the Options property of a DBGrid, you give yourself the ability to s ...

  4. Js数组和字符串常用方法

    字符串: 1.concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串.  2.indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 .  3.ch ...

  5. zabbix 自定义监控nginx

    zabbix自定义nginx监控项 查看nginx编译安装是否加上该选项,如果没有请重新编译安装 配置nginx.conf vim /usr/local/cpgroup/nginx/conf/vhos ...

  6. STL Queue 容器

    STL Queue 容器 Queue简介         queue是队列容器,是一种“先进先出”的容器.         queue是简单地装饰deque容器而成为另外的一种容器.        # ...

  7. python读取写入内存方法SringIO,BytesIO

    python中不仅仅可以在磁盘中写入文件,还允许直接在内存中直接写入数据:需要借助StringIO和BytesIO来实现: 1.直接操作StringIO from io import StringIO ...

  8. javascript循环事件只响应最后一次的问题处理

    在所有的面向对象编程语言中,只要涉及到逻辑的代码,常见的问题都是循环创建很多个对象UI,在循环体中对这些对象添加事件.如果不做处理,和其他地方一样的添加事件,其结果都是只响应最后一次循环之后的结果.原 ...

  9. iptables之NAT代理-内网访问外网

    1.前言 本文使用NAT功能:内网服务器,想上网又不想被攻击. 工作原理:内网主机向公网发送数据包时,由于目的主机跟源主机不在同一网段,所以数据包暂时发往内网默认网关处理,而本网段的主机对此数据包不做 ...

  10. HDU.1796 How many integers can you find ( 组合数学 容斥原理 二进制枚举)

    HDU.1796 How many integers can you find ( 组合数学 容斥原理 二进制枚举) 题意分析 求在[1,n-1]中,m个整数的倍数共有多少个 与 UVA.10325 ...