1.html部分
JQueryEdit.html源代码：
2.javascript部分：
jqueryedit.js源代码：
3.css部分
edit.css源代码：
JQueryEdit.html源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery实例3:可编辑的表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/edit.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jqueryedit.js"></script>
</head>
<body>
<table border="1px">
<tr>
<td>跑酷</td>
<td>中国功夫</td>
</tr>
</table>
</body>
</html>
2.javascript部分：
jqueryedit.js源代码：
//在页面加载时，让所有的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.建立一个文本框，也就是input的元素节点
var input = $('<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.获取当前文本框的内容
inputText = inputNode.val();
//4.清空td里面的内容
var tdNode = inputNode.parent();
//5.将保存的文本框的内容填充到td中
tdNode.html(inputText);
//6.让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//6.将文本框加入到td中
td.append(input); //也可以用input.appendTo(td);
//6.5让文本框里面的文字被高亮选中
//需要将jquery的对象转换成DOM对象
var inputdom = input.get(0);
inputdom.select();
//7.需要清除td上的点击事件
td.unbind("click");
}
3.css部分
edit.css源代码：
td {
/*相邻边被合并*/
border-collapse: collapse;
}
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
