`

JQueryInplaceEdit

jQueryHTML浏览器 
阅读更多 
$(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>


分享到：
| checkbox 全选和取消全选
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics