可编辑的表格 - 壹咪阳光

可编辑的表格

1脚本jqueryedit.js

//在页面装载时，让所有的td都有一个点击事件

$(document)ready(function(){

//找到所有的td节点

var tds=$("td");

//给所有的td节点增加点击事伯

tds.click(function(){

//0保存当前的td节点

var td=$(this);

//1取出td里面的内容

var text=td.text();

//2清空td里面的内容

td.html("");//也可以用td.empty();

//3建立一个文本框，也就是input的元素节点

var input=$("<input>");

//4设置文本框的值是保存起来的文本内容

input.attr("value",text);//设置属性值

//4.5让文本框可以响应键盘按下事件，主要用于处理回车确认

input.keyup(function(event){

0.获取当前用户按下的键值

var myEvent=event||window.event;

var kcode=myEvent.keyCode;

1.判断是否是回车按下

if(kcode==13){

var inputnode=${this};

//2.保存当前文本框的内容

var inputtext=inputnode.val();

//3.清空td里面的肉容

var tdNode=inputnode.parent();

//4.将保存的文本框的空容填充到td中

tdNode.html(inputtext);

//5.让td重新拥有点击事件

tdNode.click();

}

});

//5将文本框加入到td中

td.append(input);//也可以用input.appendTo(td);加添节点

//5.5让文本框里面的文字被高亮选中

//需要将jquery的对象转换成dom对象

var inputdom=input.get(0);

inputdom.select();

//6移除点击事件

td.unbind("click");

});

2页面jqueryEdit.html

<html>

<head>

<head>

<body>

<tr>

</tr>

</table>

</body>

</html>

posted on 2009-11-03 10:23 junly 阅读(203) 评论(0) 编辑收藏所属分类: ajax/jquery/js

常用链接

留言簿(4)

随笔分类

随笔档案

收藏夹

other

文章

搜索

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问
相关文章: Useing Jquery With JSF js巧用qq接口得到当前IP jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中 jQuery-强大的jQuery选择器 (详解)[转] 给Dreamweaver安装jQuery插件jQuery_API.mxp ajax 书签 LavaLamp mean 事件显示声明 javascript语法_函数_对象_数组 javascript DOM