Chinaunix首页 | 论坛 | 博客

Nathing

首页　| 　博文目录　| 　关于我

mingwjj

  • 博客访问： 475756
  • 博文数量： 111
  • 博客积分： 3146
  • 博客等级： 中校
  • 技术积分： 939
  • 用 户 组： 普通用户
  • 注册时间： 2009-07-07 11:23
个人简介

Nathing

文章分类

全部博文（111）

文章存档

2016年（2）

2015年（1）

2014年（31）

2012年（2）

2011年（9）

2010年（36）

2009年（30）

我的朋友
最近访客
推荐博文
javascriptEdit

分类：

2010-11-14 22:07:54

jQuery可编辑表格

//在页面装载时,让所有的td都拥有一个点击事件
$(document).ready(function()
{
    //找到所有td
    var tds = $("td");
    //给所有的td节点增加点击事件
    tds.click(tdclick);
});

function tdclick()
{
    //0.保存当前td节点
    var td = $(this);
    //1.取出当前td中的文本内容保存起来
    var text = td.text();
    //2.清空td里面的内容       
    td.html(""); //也可以用td.empty();

    //3.建立一个文本框
    var input = $("");
    //4.设置文本框的值是保存起来的文本内容
    input.attr("value",text);
    //让文本框响应键盘事件
    input.keyup(function(event)
    {
        //1.获取当前用户按下的键值
        var myEvent = event || window.event;//不同浏览器获取事件对象的差异
        var kcode = myEvent.keyCode;
        //2.盘点是否是回车按下
        if(kcode == 13)
        {
            var inputnode = $(this);
            //3.保存当前文本框的内容
            var inputtext = inputnode.val();
            //4.清空td里面的内容
            var tdNode = inputnode.parent();
            
            //5.将保存的文本框的内容填充到td中
            tdNode.html(inputtext);
            //6.让td重新拥有点击事件
            tdNode.click(tdclick);
        }
    });
    //5.将文本框加入到td中
    td.append(input);//也可以用input.appendTo(td)

    //让文本框里文字被选中:javascript中的select()方法
    //需要将jQuery的对象转换成dom对象
    var inputdom = input.get(0);//get()方法可以返回被包装着(可能包装多个dom对象)的那个dom对象

    inputdom.select();
    //6.需要消除td上的点击事件
    td.unbind("click");
}


css:

table,td
{
    border-collapse: collapse;/*让相邻的边框合并*/
    border: 1PX solid green;
}


html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQueryEdit.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="css/edit.css">
    <script type="text/javascript" src="jslib/jquery-1.2.6.js"></script>
    <script type="text/javascript" src="jslib/jQueryedit.js"></script>
  </head>
  
  <body>
    <table>
        <tbody>
            <tr>
                <td>123123</td>
                <td>456456</td>
            </tr>
        </tbody>
    </table>
  </body>
</html>


阅读(928) | 评论(1) | 转发(0) |
0

上一篇：IE和firefox的Dom对象树的差异

下一篇：点击主菜单,对应的子菜单可以显示和影藏

给主人留下些什么吧！~~

chinaunix网友2010-11-15 15:29:58

很好的, 收藏了 推荐一个博客，提供很多免费软件编程电子书下载： http://free-ebooks.appspot.com

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6