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.time 时间和简单任务

    java.time是jdk1.8才用的 时间管理 package com.test.time; import java.time.*; /** * Created by MY on 2017/8/7. ...

  2. WebDriver 工作原理

    WebDriver是W3C的一个标准,由Selenium主持. 具体的协议标准可以从http://code.google.com/p/selenium/wiki/JsonWireProtocol#Co ...

  3. JavaScript 稀奇的js语法

    function c(expression) { console.log(expression); } c(-0); // -0 c(-0 === +0); // true c((-0).toStri ...

  4. poj 1144(割点）

    题目链接:http://poj.org/problem?id=1144 题意:给出一个无向图,求关键节点的个数. 分析:双连通分量Tarjan算法直接求割点就行了,裸的模板题. AC代码: #incl ...

  5. facenet模型训练

    做下记录,脚本如下: 对比 python3 src/compare.py ../models/-/ ../faces/pyimgs/dashenlin/ytwRkvSdG1000058.png ../ ...

  6. Java并发编程之线程安全、线程通信

    Java多线程开发中最重要的一点就是线程安全的实现了.所谓Java线程安全,可以简单理解为当多个线程访问同一个共享资源时产生的数据不一致问题.为此,Java提供了一系列方法来解决线程安全问题. syn ...

  7. 使用userData兼容IE6-10，chrome，FF 及360等浏览器的本地存储

    开发过程中涉及本地存储的使用,IE很多版本都不支持localStorage,没办法,就得兼容使用userData了.废话不说了,看代码: (function(window){var LS;(funct ...

  8. pyCharm最新2019激活码

    破解补丁激活优点:到期时间为2099年,基本为永久啦 缺点:相对服务器激活麻烦些,但是一共只需要3个步骤,其实并不麻烦 一.下载 https://pan.baidu.com/s/1mcQM8CLUnw ...

  9. Latex编译过程中遇到的奇奇怪怪的问题及解决方案

    标签(空格分隔): 杂七杂八的问题 有必要写一个博文记录自己在Latex编译时遇到的各种问题,希望可以帮到遇到同样错误的亲故.讲真,一直没有系统的学习Latex,都是投哪个会直接拿那个会的模板来套,然 ...

  10. python使用SMTP发送qq/sina邮件

    python使用qq邮箱(个人邮箱)发送邮件需开启qq邮箱的SMTP服务 在设置中开启pop3/SMTP服务,返回的密码就是之后代码中登录使用账户密码(在完整代码中标识了出来) 之后出现如下错误 sm ...