参考链接：

　　http://www.freejs.net/

　　http://www.freejs.net/article_biaodan_34.html

　　http://www.freejs.net/search.php?keywords=%E7%BC%96%E8%BE%91

效果图：

源代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title>jQuery table td可编辑</title>

    <style type="text/css">

        /*

         * page css

         */

        a,body,center,code,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,i,img,label,li,ol,p,pre,small,span,strong,sub,sup,u,ul {

            margin: auto;

            padding: 0;

            border: 0;

            outline: 0;

            font-size: 100%;

            vertical-align: baseline;

            background: 0 0

        }

        h2 {

            text-align: center;

            padding: 10px;

            font-size: 20px

        }

        a {

            color: #007bc4;

            text-decoration: none

        }

        a:hover {

            text-decoration: underline

        }

        ol,ul {

            list-style: none

        }

        table {

            border-collapse: collapse;

            border-spacing: 0

        }

        body {

            height: 100%;

            font: 12px;

            color: #51555C;

            background: #2C2C2C

        }

        img {

            border: none

        }

        .logo {

            width: 910px

        }

        #main_demo {

            width: 910px;

            min-height: 600px;

            margin: 30px auto 0 auto;

            background: #fff;

            -moz-border-radius: 12px;

            -khtml-border-radius: 12px;

            -webkit-border-radius: 12px;

            border-radius: 12px

        }

        .ad {

            text-align: center;

            margin-top: 25px

        }

        .clear {

            clear: both

        }

        /*

         * demo styles

         */

         table {

            margin: 0 auto;

            border-collapse: collapse

        }

        td,th {

            width: 10%;

            font-size: 14px;

            padding: 10px 0;

            text-align: center;

            border: 1px solid #ddd

        }

        th {

            background-color: #f4f4f4

        }

        /*

         * input

         */

         td.input {

            position: relative

        }

        td input {

            width: 100%;

            border: 1px solid #CF5C74;

            background: #F90;

            border-radius: 4px;

            display: block;

            position: absolute;

            text-align: center;

            font-size: 14px;

            left: 0;

            top: 0;

            padding: 11px 0;

            margin: -1px 0 0 -1px

        }

        td.hover {

            background: #eee

        }

    </style>

</head>

<body>

    <div id="main_demo">

        <h2>jQuery table td可编辑</h2>

        <table border="0" cellpadding="0" cellspacing="0" width="500">

            <tbody>

                <tr>

                    <th>td input演示</a></th>

                    <th scope="col">列1</th>

                    <th scope="col">第二列</th>

                    <th scope="col">其他</th>

                </tr>

            </tbody>

            <tbody>

                <tr>

                    <th>1</th>

                    <td class="content"></td>

                    <td class="text"></td>

                    <td class="position">0</td>

                </tr>

                <tr>

                    <th>2</th>

                    <td class="content"></td>

                    <td class="text">0</td>

                    <td class="position">0</td>

                </tr>

                <tr>

                    <th>3</th>

                    <td class="content"></td>

                    <td class="text"></td>

                    <td class="position hover">0</td>

                </tr>

            </tbody>

        </table>

    </div>

    <!-- JS文件：jQuery-百度CDN -->

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(function() {

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

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

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

                        .find('input')

                            .focus()

                            .blur(function() {

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

                            });

                }

            }).hover(function() {

                $(this).addClass('hover');

            }, function() {

                $(this).removeClass('hover');

            });

        });

    </script>

</body>

</html>

^_^

jQuery table td可编辑的更多相关文章

  1. 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

  2. [Web 前端] Jquery实现可直接编辑的表格

    cp from :https://www.cnblogs.com/sjqq/p/6392001.html?utm_source=itdadao&utm_medium=referral 文实例讲 ...

  3. JQuery实现可直接编辑的表格

    本文实例讲述了JQuery实现可直接编辑的表格.分享给大家供大家参考.具体分析如下: 功能: 创建一个表格,用户单击某个单元格后,可以直接修改单元格文本.在编辑状态下,用户可按回车键确认修改,按ESC ...

  4. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  5. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  6. 点击编辑table变为可编辑状态

    简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...

  7. Jquery改变td内容为1的颜色

    Jquery改变td内容为1的颜色<table id="tb" > <tr> <td val="1">1</td> ...

  8. UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

    正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...

  9. [Js/Jquery]table行转列

    摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适, ...

随机推荐

  1. docker容器资源配额控制

    转自:http://blog.csdn.net/horsefoot/article/details/51731543 文/ 天云软件 容器技术团队 Docker通过cgroup来控制容器使用的资源配额 ...

  2. kafka多线程消费及处理和手动提交处理方案设计[转]

    转自:http://blog.csdn.net/haoyifen/article/details/54692503 kafka与其他消息队列不同的是, kafka的消费者状态由外部( 消费者本身或者类 ...

  3. windows下使用mingw编译出ffplay（简化版）

    之前编译FFmpeg直接使用dll.lib,默认的mingw也不会编译出ffplay.exe. 近期由于工作需要,需要验证下修改之后的FFmpeg版本是否正常,需要使用ffplay.exe. 比较暴力 ...

  4. iOS开发：一个高仿美团的团购ipad客户端的设计和实现（功能：根据拼音进行检索并展示数据，离线缓存团购数据，浏览记录与收藏记录的批量删除等）

    大致花了一个月时间,利用各种空闲时间,将这个客户端实现了,在这里主要是想记录下,设计的大体思路以及实现过程中遇到的坑...... 这个项目的github地址:https://github.com/wz ...

  5. php类库安装xml

    问题 报错:Call to undefined function dom_import_simplexml() yum install php-dom service restart httpd 参考 ...

  6. 3. 哈工大LTP解析

    1. 通俗易懂解释知识图谱(Knowledge Graph) 2. 知识图谱-命名实体识别(NER)详解 3. 哈工大LTP解析 1. 前言 哈工大语言技术平台Language Technology ...

  7. js生成验证码并且验证

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  8. Android GridView的使用页面按钮

    GridView(网格视图),用来显示网格,用来显示一些按钮比较好用. 上代码吧. 主页面:activity_main.xml 添加一个GridView用来显示按钮的列表 <?xml versi ...

  9. PHP输入流php://input与$_POST、$_GET

    Content-Type的取值会影响php的输入流 学习笔记 1,Content-Type仅在取值为application/x-www-data-urlencoded和multipart/form-d ...

  10. MySQL——SQL Mode详解

    简介 MySQL服务器能够工作在不同的SQL模式下,并能针对不同的客户端以不同的方式应用这些模式.这样,应用程序就能对服务器操作进行量身定制以满足自己的需求.这类模式定义了MySQL应支持的SQL语法 ...