参考链接：

　　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. win10+VS2015+boost_1.60.0

    安装boost库的初衷boost库是一个C++'准'标准库,对于一个C++程序员来说,了解强大的boost库是很有必要的.当然,在学习使用这样一个强大的库之前,首先要学会安装.本文讲述了boost_1 ...

  2. 每日英语：The Power of Parents Who Say 'No'

    I grew up in an affluent area. Most kids owned multiple Cabbage Patch dolls and Gear bags and pairs ...

  3. Python Import机制

    最近在看<Python源码剖析>,对Python内部运行机制比以前了解的更深入了,感觉自己有机会也可以做个小型的动态脚本语言了,呵呵,当然是吹牛了.目的当然不是创造一个动态语言,目的只有一 ...

  4. Spark-shell引入第三方包

    Spark-shell引入第三方包 如何引入 spark-shell --jars path/nscala-time_2.10-2.12.0.jar 若有多个jar包需要导入,中间用逗号隔开即可. s ...

  5. scala连接数据库

    scala连接数据库 使用JDBC即可: 在sbt中添加对应依赖 libraryDependencies ++= Seq( "mysql" % "mysql-connec ...

  6. Linux源码分析之：malloc、free

    之前写代码的时候一直有个疑问,malloc申请内存的时候指定了内存大小,但是free的时候却只指定要释放的内存地址,那么free是如何知道它要释放的内存空间大小呢? 源码之前,了无秘密,下面就从源码来 ...

  7. weblogic重启脚本

    客户要求每周weblogic重启,每台机器上有多个weblogic实例,开始准备单个服务器实例做成sysv风格的脚本,但是实例较多,于是在满足需求和自动化重启的情况下,多个服务器实例的重启放在了一起, ...

  8. css设置让a标签充满整个li

    首先贴一段html代码: <li id="sendText"><a href="#" title="发送文字">&l ...

  9. 模式匹配的KMP算法详解

    这种由D.E.Knuth,J.H.Morris和V.R.Pratt同时发现的改进的模式匹配算法简称为KMP算法.大概学过信息学的都知道,是个比较难理解的算法,今天特把它搞个彻彻底底明明白白. 注意到这 ...

  10. yum使用过程中的常见错误

    (1) 使用yum安装相关软件包时一直提示以下错误:repodata/repomd.xml: [Errno 4] IOError: <urlopen error (113>, Error: ...