参考链接：

　　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. JavaScript 模块化简述

    JavaScript 模块化简述 前言 关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...

  2. 【嵌入式】bootloader，linux，filesystem的烧写

    平台: 深圳市优龙科技有限公司的FS2410(基于ARM9) 准备: 1.用串口(UART1,J8)线与PC机相连,这个是用来传输数据和显示信息的 2.连接USB数据下载线(usb device),注 ...

  3. vim复制内容到系统剪贴板

    vim提供了y键盘操作用于复制文本,但是复制之后的文本位于当前窗口的缓冲区中,不在系统剪贴板中,这给跨程序文本拷贝代码很来很多麻烦.搜索发现,可以使用]y指令快速将选定的文本复制到系统剪贴板中. 顺便 ...

  4. 【机器学习】主成分分析PCA（Principal components analysis）

    1. 问题 真实的训练数据总是存在各种各样的问题: 1. 比如拿到一个汽车的样本,里面既有以“千米/每小时”度量的最大速度特征,也有“英里/小时”的最大速度特征,显然这两个特征有一个多余. 2. 拿到 ...

  5. java将图片转换成二进制

    package com.oumyye.图片; import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; imp ...

  6. Windows-DB2 9.7安装图解

    解压后,双击 setup.exe 安装 打开后,选择"安装产品" 在安装产品中,选择"安装新产品" 点击下一步 同意软件许可协议,点击下一步 可以根据需要,选择 ...

  7. mac OS X中升级php5.5至php5.6 or php7

    在做php项目中,提示“Warning. PHP 5.6 or newer is required. Please, upgrade your local PHP installation.” 通过p ...

  8. JVM——代空间的划分

    首先看在JVM的堆中,按代的划分: Young:主要是用来存放新生的对象. Old:主要存放应用程序中生命周期长的内存对象. Permanent:是指内存的永久保存区域,主要存放Class和Meta的 ...

  9. Py2.7 no module named tkinter

    一个简单的例子 #! /usr/bin/env python#coding=utf-8from tkinter import *Label(text="Spam").pack()m ...

  10. Go Revel - server.go 源码分析

    之前介绍了 Go Revel - main函数分析 http://www.cnblogs.com/hangxin1940/p/3263775.html 最后会调用 `revel.Run(*port)` ...