jquery实现动态表格编辑 -

gg19861207

浏览: 182823 次
性别:
来自: 北京

最近访客更多访客>>

SueXie

fatzhan

gaoshenmu

梦落花开

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2009-11 ( 11)
2009-10 ( 10)
2009-09 ( 51)
更多存档...

jquery实现动态表格编辑

jQuery JavaScript HTML 浏览器

js文件：

//在页面装载成功以后，就给所有的td节点注册鼠标点击事件
$(document).ready(function(){
var clickfunction = this;
//1.找到所有的td节点
var tds = $("td");
//2.给所有的td节点都这次鼠标点击事件，但是可以根据$(this)来判断点击的到底是
//众多td节点中的哪一个
tds.click(tdClick);
});

//td被点击事件
function tdClick(){
//0.保存当期的td节点
var tdNode = $(this);
//1.取出当前td中的内容保存起来
var text = tdNode.text();
//2.清空td里的内容
tdNode.html("");
//3.建立一个文本框，也就是input元素节点
var input = $("<input>");
//4.设置文本框的值是原先保存起来的td里的值
input.attr("value",text);
//4.5让文本框可以监听到键盘按下并弹起的事件，主要用来判断回车键是否被按下

input.keyup(function(event){
//获取当前用户按下的键
//解决不同浏览器获取事件对象的差异
var myEvent = event || window.event;
var kcode = myEvent.keyCode;
//1.判断是否是回车按下,13在JavaScript代码中代表回车键
if(kcode == 13){
//2.找到当前事件发生的input节点
var inputNode = $(this);
//2.获取当前文本框中的内容

var text = inputNode.val();
//2.5 获取该input节点所在的td节点
var tdNod = inputNode.parent();
//3.将保存的文本框的内容保存到td中
tdNod.html(text);
//4.让td重新拥有点击事件
tdNod.click(tdClick);
}

});

//5.将文本框添加到td中
tdNode.append(input);
//5.5将文本框中的内容高亮显示
//因为select不是jquery中的方法，而是dom对象的方法，所以要
//将jquery对象input通过get(0)方法转换成dom对象inputdom
var inputdom = input.get(0);
inputdom.select();
//6.需要清楚tdNode上的click事件
tdNode.unbind("click");
}

html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryedit.js"></script>
<title></title>
</head>
<body>
<table border="1px">
<tbody>
<tr>
<td>123</td>
<td>456</td>
</tr>
</tbody>
</table>
</body>
</html>