参考链接：

　　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. vim学习笔记（9）：vim显示文件名

    如何让vim在编辑模式下显示文件名 在根目录下:~/.vimrc 中追加一行: set laststatus=2 shell 下执行命令: echo "set laststatus=2&qu ...

  2. 【C/C++】C/C++中Static的作用详述

    在C语言中,static的字面意思很容易把我们导入歧途,其实它的作用有三条. ❶先来介绍它的第一条也是最重要的一条:隐藏.当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可 ...

  3. JAVA-JSP内置对象之request对象的其他方法

    相关资料:<21天学通Java Web开发> request对象的其他方法1.request对象除了可以用来获得请求参数,还可以用来获得HTTP标头及其他信息. 方法           ...

  4. <股市高手和你想的不一样>读书笔记

    书在这里 在股市中挖掘真正有成长潜力的好企业,是成功投资者的关键 股票被低估的时候,才值得买 我们买股票,就是买这家公司的未来 公司的成长性要重点看两个方面,一个方面要看该公司近三年的成长趋势,另外一 ...

  5. ubi 文件系统加载失败原因记录

    尝试升级 kernel 到 4.4.12版本,然后出现 kernel 加载 ubi 文件系统失败的现象,现象如下 [ 3.152220] ubi0 error: vtbl_check: too lar ...

  6. Android——selector背景选择器的使用详解（二）

    在开发应用中,很多情况下要设计listview或button控件的背景,下面总结一下android的selector的用法:1.在drawable中配置Android的selector.将如下的XML ...

  7. 设备接口体应用container_of的思考

    结构体应用container_of,可参考 container_of

  8. Redis哈希

    Redis的哈希值是字符串字段和字符串值之间的映射,所以他们是表示对象的完美数据类型 在Redis中的哈希值,可存储超过400十亿键值对. 例子 redis 127.0.0.1:6379> HM ...

  9. ajax 多个参数问题，如何既能表单序列化获取，又能加参数，加全部代码

      $.param({'address':address,'delivity':delivity,'payment':payment}) + '&' + $('#card_form').ser ...

  10. Ubuntu free以及Linux内存占用大的解释

    -bash-3.00$ free total used free shared buffers cached Mem: 514020 465932 48088 0 15864 348844 -/ bu ...