《Javaweb-JQuery兑现可编辑的表格》 _Web前端

《Javaweb---JQuery实现可编辑的表格》

问题仔细找，总会找到的。

<!DOCTYPE html>
<html>
  <head>
    <title>简单的可编辑表格</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">
    
    <style type="text/css">
    td {
	border: 1px red solid;
	cursor: pointer;
	}
    </style>
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/edit.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/edit.css"> -->
  </head>
  
  <body>
  <table>
  	<tr>
  		<td>123</td>
  		<td>456</td>
  	</tr>
  </table>
  </body>
</html>

//当页面加载时执行此方法
$(document).ready(function(){
	
	var tds = $("td");
	//对所有的td注册点击事件
	tds.click(tdclick);
});

function tdclick() {
	var td = $(this); 
	
	//保存td中的文本数据
	var text = td.text();
	//清空td中的数据
	td.text("");
	
	//利用JQuery插入一个input标签
	var input = $("<input>");
	//设置input标签中的值
	input.attr("value",text);
	
	//给input注册键盘按下弹起事件
	input.keyup(function(event){
		//获取键盘按下的code值
		var key = event.keyCode;
		
		//判断是否是回车键
		if (key == 13){
			//获取input的value中值
			var ntext = $("input").val();
			
			//将input中的值赋给td
			td.html(ntext);
			//重新建立td点击事件
			td.bind("click",tdclick);
		}
	});
	//将input标签添加到td中
	td.append(input);
	//将input中的内容选中
	input.get(0).select();
	//取消td点击事件
	td.unbind("click",tdclick);
}