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. C++编译与链接（2）-浅谈内部链接与外部链接

    发现每次写技术博客时,都会在文章开头处花费一番功夫 ...从前,有一个程序员....他的名字叫magicsoar 为什么有时会出现aaa已在bbb中重定义的错误? 为什么有时会出现无法解析的外部符号? ...

  2. 词频统计的java实现方法——第一次改进

    需求概要 原需求 1.读取文件,文件内包可含英文字符,及常见标点,空格级换行符. 2.统计英文单词在本文件的出现次数 3.将统计结果排序 4.显示排序结果 新需求: 1.小文件输入. 为表明程序能跑 ...

  3. js ajax 经典案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. SSL证书部署

    SSL证书部署指南 https://www.trustauth.cn/ssl-guide

  5. 过滤器将获取到的内容注入到servlet的request中

    过滤器将获取到的内容注入到servlet的request中

  6. 【ARC077F】SS

    Description 如果某个串可以由两个一样的串前后连接得到,我们就称之为"偶串".比如说"xyzxyz"和"aaaaaa"是偶串,而& ...

  7. BZOJ3834 [Poi2014]Solar Panels 【数论】

    题目链接 BZOJ3834 题解 容易想到对于\(gcd(x,y) = D\),\(d\)的倍数一定存在于两个区间中 换言之 \[\lfloor \frac{a - 1}{D} \rfloor < ...

  8. phpmyadmin 配置方法

    几乎所有的配置参数都在 config.inc.php 文件中.如果这个文件不存在,您可以在 libraries 目录中找到 config.default.php,将它复制到根目录,并改名为 confi ...

  9. Android 图片加载框架 Glide 的用法

    https://github.com/bumptech/glide Android图片加载框架最全解析(一),Glide的基本用法http://blog.csdn.net/guolin_blog/ar ...

  10. 解题：POI 2012 Well

    题面 比较明显地能看出二分来,但是检查函数很难写.对于二分出的一个$mid$,我们要让它满足在$m$次操作内令序列中存在一个为零的位置,同时使得任意相邻的两项之差不超过$mid$ 第二项的检查比较好做 ...