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. Linux基础五(系统管理)

    Linux 系统管理 1. 进程管理 1.1 进程管理简介 进程的简介: 一个程序在运行的时候会占用系统的资源,即系统分配资源给某个程序使用,进程就是正在运行中的某个程序或者命令.进程又可以细分为线程 ...

  2. 软工网络15团队作业8——Beta阶段敏捷冲刺（Day4）

    提供当天站立式会议照片一张 每个人的工作 1.讨论项目每个成员的昨天进展 赵铭: 在知晓云上建立数据表 吴慧婷:做了背单词界面并学习了词库界面的设计. 陈敏: 我的词库-全部词汇功能/新建词汇功能全部 ...

  3. java如何写入txt文件

    public class TxtWrite { public static void main(String args[]){ contentToTxt("D:\\xyky.txt" ...

  4. No module named 'MySQLdb' python3.6 + django 1.10 + mysql 无法连接

    学习python 连接mysql数据库的时候遇到了问题 首先安装mysql: 工具栏 ===>file ==> default settings==>Project Interpre ...

  5. BZOJ5297 CQOI2018社交网络（矩阵树定理）

    板子题. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> # ...

  6. P4596 [COCI2011-2012#5] RAZBIBRIGA

    题目描述 四个等长的单词可以放在一起构成一个正方形,两个单词水平放置,两个竖直放置.水平单词只能从左往右读,竖直的单词只能从上往下读.四个角共用一个字母. 图中是由单词HLAD,NIVA,HSIN,D ...

  7. System Board Replacement Notice

    System Board Replacement Notice System Board Replacement Notice for TP 770E and TP 600 Restoring the ...

  8. BZOJ 2732: [HNOI2012]射箭

    2732: [HNOI2012]射箭 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2532  Solved: 849[Submit][Status] ...

  9. 【BZOJ1041】圆上的整点（数论）

    [BZOJ1041]圆上的整点(数论) 题面 BZOJ 洛谷 题解 好神仙的题目啊. 安利一个视频,大概是第\(7\)到\(19\)分钟的样子 因为要质因数分解,所以复习了一下\(Pollard\_r ...

  10. 【转】一口气读懂NB-IoT

    在过去的一年多,NB-IoT真的可以说是大红大紫.在通信圈里,除了说5G,就是说物联网.如果说物联网,八成就是在说NB-IoT. 在目前5G还没来的情况下,NB-IoT基本上是独领风骚.风光无限. 各 ...