JQuery实现可编辑的表格

long546324

浏览: 208966 次
性别:
来自: 云南

最近访客更多访客>>

mzguodong

as84568326

扁舟垂钓

gxpcw

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jQuery CSS IE Ajax 浏览器

提示：点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按Esc可取消编辑
index.html文件

<!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>
    <title>JQuery实现可编辑的表格</title>
    <link href="css/EditTable.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/EditTable.js" type="text/javascript"></script>
</head>
<body>
    <table>
        <tr>
            <td>123546789</td>
            <td>987654321</td>
        </tr>
    </table>
</body>
</html>

EditTable.css文件

table,td
{
	border:solid 1px black;
    border-collapse:collapse;
}

EditTable.js文件

//相当于在页面中的body标签加上onload事件
$(function(){
    //找到所有的td节点
    var tds=$("td");
    //给所有的td添加点击事件
    tds.click(function(){
        //获得当前点击的对象
        var td=$(this);
        //取出当前td的文本内容保存起来
        var oldText=td.text();
        //建立一个文本框，设置文本框的值为保存的值   
        var input=$("<input type='text' value='"+oldText+"'/>"); 
        //将当前td对象内容设置为input
        td.html(input);
        //设置文本框的点击事件失效
        input.click(function(){
            return false;
        });
        //设置文本框的样式
        input.css("border-width","0");              
        input.css("font-size","16px");
        input.css("text-align","center");
        //设置文本框宽度等于td的宽度
        input.width(td.width());
        //当文本框得到焦点时触发全选事件  
        input.trigger("focus").trigger("select"); 
        //当文本框失去焦点时重新变为文本
        input.blur(function(){
            var input_blur=$(this);
            //保存当前文本框的内容
            var newText=input_blur.val(); 
            td.html(newText); 
        }); 
        //响应键盘事件
        input.keyup(function(event){
            // 获取键值
            var keyEvent=event || window.event;
            var key=keyEvent.keyCode;
            //获得当前对象
            var input_blur=$(this);
            switch(key)
            {
                case 13://按下回车键，保存当前文本框的内容
                    var newText=input_blur.val(); 
                    td.html(newText); 
                break;
                
                case 27://按下esc键，取消修改，把文本框变成文本
                    td.html(oldText); 
                break;
            }
        });
    });
});

JQuery实现可编辑的表格.rar (30.3 KB)
下载次数: 3267

分享到：

ASP.NET+JQuery模拟股票信息涨跌(Ajax技术 ... | JQuery实现徐徐升起的qq消息框

2009-07-24 21:24
浏览 3085
评论(14)
论坛回复 / 浏览 (13 / 18490)
查看更多

14 楼 long546324 2009-12-22

获取所按下键盘按键的值，如Enter键的值是13 key=13

13 楼 ccgfcg2004 2009-12-20

问一下这两句有什么作用

var keyEvent=event || window.event;   
            var key=keyEvent.keyCode;

12 楼 gepangtsai 2009-12-18

非常好！！！

11 楼远去的渡口 2009-12-09

多谢lz，我正开始学它，对我很有帮助。

10 楼 langhua9527 2009-12-04

你咯是昆明的？

//第12行你可以这样写
var input=$("<input type='text' value='"+oldText+"'/>").width(td.width()).height(td.height());
//然后24行你可以删了，你看着不晕啊。。。

9 楼蓝黑不败 2009-11-30

好像在出IE浏览器之外的浏览器执行取消操作，它不会保存原来的值

8 楼 lym6520 2009-11-28

LZ强，思路很清晰！受教了！

7 楼 maddogfyg 2009-11-28

楼主不错，注释这么全面，适合我这种jquery新手，多谢了！

6 楼 kjj 2009-08-08

嗯，楼主的思路很好，我正打算用哦挂在我的表格控件中

5 楼 menuhin 2009-08-07

哈哈，以前自已也写过一个！不过感觉不是很好！
这个东西在项目中经常用到的！！

4 楼 nishijia 2009-08-07

多谢你的注释让初学者能看懂并修改

3 楼 long546324 2009-07-29

用JQuery中的Ajax技术把数据提交到服务器端，做相应的处理后就可以保存到数据库中了。

2 楼 halk 2009-07-29

怎么做成动态的？？
数据可以保存在数据库中的..

1 楼 jamix 2009-07-27

提供了一个方法...在扩展完善下就可以用了...嘿嘿

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论