Jquery和ajax开发案例之---可编辑的表格_jq 实现excel表格编辑器 php ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/zl594389970/article/details/24118993

本文通过一个实际案例介绍了如何利用Jquery和Ajax技术创建一个可编辑的表格，详细展示了HTML代码和Jqueryedit.js的实现过程，旨在帮助开发者理解这两种技术在动态更新数据方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例(浮动窗口、动态股票信息、弹出菜单、可编辑的表格、自动补全输入框)下载地址：

http://download.youkuaiyun.com/detail/zl594389970/7218687

效果图：

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>JQuery实例：可编辑的表格</title>
		<script type="text/javascript"  src="js/jquery-1.3.1.js"></script> 
		<script type="text/javascript"  src="js/jqueryedit.js"> </script>
		
	</head>
	<body>
		ESC :回退; Eter:保存；失去焦点:保存
		<table border="1px" >
			<tr>
				<td>ddd</td>
				<td>ddd</td>
			</tr>
		</table>
	</body>
</html>

jqueryedit.js代码：

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

//tdclick
function tdclick() {
	var clickfunction = this;//保存当前点击事件
	//1取出当前td中的文本内容保存起来
	var td = $(this);
	var text = td.text();
	//2清空td里面的内容
	td.html(""); //也可用empty()
	//3建立input元素节点
	var input = $("<input>");
	//4设置文本框中的值是原来文本中的内容
	input.attr("value",text);//设置属性值
	//4.5让文本框可以响应键盘按下并弹起的事件，主要用于回车确认，Esc回退
	input.keyup(function(event) {//注册事件
		//0获取当前用户按下的键值
		//解决不同浏览器创建事件对象的差异
		var myEvent = event || window.event;
		var keycode = myEvent.keyCode;//取键值，查询javascript键盘表，查看对应键值，或者通过alert(event.keyCode)查看键值

		//保存当前文本框的内容
		var inputnode = $(this);
		//1判断是否是回车键 ：13
		if( keycode == 13 )
		{	savetext(inputnode);
		}
		//按ESC键时返回操作
		if( keycode == 27)
		{
			//找到td节点
			var tdNode = inputnode.parent();
			tdNode.html(text);
			//让td重新拥有点击事件
			tdNode.click(tdclick);
		}
		
	});
	//当文本框失去焦点是执行保存当前文本框的内容
	input.blur(function() {
		savetext($(this));
	});
	//5将文本框加入到td中
	td.append(input);//也可用input.appendTo(td);
	//5.5让文本框里面的文字被高亮选中
	//需要将jquery中的对象转换为dom对象
	var inputdom =input.get(0); //转换为dom对象
	inputdom.select();//dom中的方法
	//6.需要清除td上的点击事件
	td.unbind("click");
}
//保存文本
function savetext(inputnode) {
	//取出当前input中value属性中的值
	var inputtext = inputnode.val();
	//清空td里面的内容
	var tdNode = inputnode.parent();
    //将保存的文本框的内容填充到td中
	tdNode.html(inputtext);
	//让td重新拥有点击事件
	tdNode.click(tdclick);
}