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

Nathing

文章分类

全部博文(111)

文章存档

2016年(2)

2015年(1)

2014年(31)

2012年(2)

2011年(9)

2010年(36)

2009年(30)

我的朋友

分类:

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>


阅读(972) | 评论(1) | 转发(0) |
给主人留下些什么吧!~~

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

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