JQueryInplaceEdit

SailingAptech

于 2009-02-15 10:43:20 发布

阅读量133

点赞数

分类专栏： JavaScript 文章标签： jQuery HTML 浏览器 ViewUI

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用jQuery库来实现网页表格中单元格的编辑功能的方法。通过简单的JavaScript代码，使得原本静态的表格内容可以被用户直接编辑，并在编辑完成后能够更新显示的内容。

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


$(document).ready(function() {
			var tds = $("td");
			tds.click(tdclick);
		});
function tdclick() {
	//找到所有的td节点
	var td = $(this);

	//获得当前的this对应的节点的值
	var text = td.text();

	//清空td的内容
	td.html("");

	//建立一个文本框,也就是input的元素节点
	var input = $("<input>");

	//设置文本框的值是保存起来的文本
	input.attr("value", text);

	//响应文本框失去焦点事件
	input.blur(function(event) {
				var inputnode = $(this);
				var inputtext = inputnode.val();
				var tdNode = inputnode.parent();
				tdNode.html(inputtext);
				tdNode.click(tdclick);
			});
	//响应键盘按下事件
	input.keyup(function(event) {

				//解决不同浏览器获取事件对象的差异
				var myEvent = event || window.Event;

				//获得键盘的keyCode
				var kcode = myEvent.keyCode;

				//判断是否是回车
				if (kcode == 13) {

					//获得文本框,返回一个jquery对象
					var inputnode = $(this);

					//获得文本框的值
					var inputtext = inputnode.val();

					//获得文本框的父节点,也就是td
					var tdNode = inputnode.parent();

					//设置td的值为文本框取到的值
					tdNode.html(inputtext);

					//重新拥有点击事件
					tdNode.click(tdclick);
				}
			});
	//将文本框加入到td中
	td.append(input);

	//通过jquery对象获得dom对象
	var inputdom = input.get();

	//文本框的文本为选中状态
	inputdom.select();

	//清楚td上的点击事件
	td.unbind("click");
}

<!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="./styles.css">-->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jqueryEdit.js"></script>

		<link type="text/css" rel="stylesheet" href="css/jqueryEdit.css" />

	</head>

	<body>
		<table>
			<tbody>
				<tr>
				<td>1231123</td>
				<td>456456</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>