JQuey之可以编辑的表格！-优快云博客

本文介绍了一个使用HTML和JavaScript实现的简单表格编辑功能。通过鼠标悬停改变行背景颜色，并允许用户点击单元格进行编辑。该案例展示了如何利用jQuery库简化DOM操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table{
	border:#000 solid 1px;
	border-collapse:collapse;
	background-color:#FF0;
	}
	
table td{
	border:#000 solid 1px;
	}	
table th{
	border:#000 solid 1px;
	background-color:#3CF;
	}
.trr{
	background:#F9F;
	}		
</style>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript">

$(document).ready(function(){
	$("table tr").mouseover(function(){
		$(this).addClass('trr');
		}).mouseout(function(){
			$(this).removeClass('trr')});
			var td01 =$("table td");
			td01.click(function(){
				var tdObj=$(this);
				var text=tdObj.html();
				tdObj.html("");
				
			 var inputObj=$("<input type='text' >").css("border-width","0").width(tdObj.width()).val(text).appendTo(tdObj).blur(function(){
				 $(this).css("background-color","#FFFF00");
				 });
			 inputObj.trigger("select");
			 
			 inputObj.click(function(){return false;});
			 inputObj.keyup(function(event){
				 var keycode=event.witch;
				 if(keycode==13){
					 inputtext=inputObj.val();
					 tdObj.html(inputtext);
					 }
				 if(keycode==27){
					 tdObj.html(text);
					 }	 
				 });
			 
			 
			 
				}												
				);
				});
			
			

</script>
</head>


<body>
<table cellspacing="0">
<tr >
<th colspan="2" bgcolor="#00CCFF">编号</th>

</tr>
<tr>
<td width="212">01</td>
<td width="215">奥巴马</td>
</tr>
<tr>
<td>02</td>
<td>碧昂丝</td>
</tr>
<tr>
<td>03</td>
<td>张三丰</td>
</tr>
<tr>
<td>04</td>
<td>斯威夫特</td>
</tr>
<tr>
<td>05</td>
<td>元始天尊</td>
</tr>


</table>
</body>
</html>