jQuery实现 鼠标点击可编辑内容

详细的请看源码,非常细的注释
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    	<style type="text/css">
    		table{
    			border:1px solid black;
    			border-collapse: collapse;
    			width:300px;
    		}
    		table th{
    			border:1px solid black;
    			width:50%;    			
    		}
    		tbody tr:nth-child(2n+1){
    			background: lightgray;
    		}    		
    		tbody tr:first-child{
    			background: lightblue;
    		}
    		table td{
    			border:1px solid black;
    			width:50%;
    		}
    	</style>
    	<script>
    		$(function(){
    			//找到所有学号单元格
    			var numTd = $('tbody td:even');
    			//给单元格注册鼠标点击的事件
    			numTd.click(function(){
    				
    				var tdObj = $(this);
    				//判断td中的input中有没有内容,如果有则不再创建
    				//因为不加这行,td宽于input后,一个小的缝隙不小心点了也会再出现添加Input事件
    				if(tdObj.children('input').length > 0)
    				{
    					return false;
    				}
    				//获取到td中的内容
    				var text = tdObj.html();
    				//清空td里面的内容
    				tdObj.html("");
    				
    				
    				
    				//在td里添加input框,并设置样式
    				var inputObj = $("<input type='text'>").css('border-width','0').val(text).appendTo(tdObj);   
    				
    				//文本框插入之后是选中可编辑状态,默认必须再点一次才会是输入状态,其实选中后光标一闪一闪的才更好,但我不会呀~~~
    				inputObj.trigger('focus').trigger('select');
    				
    				//添加完Input框后,如果我们二次点击会再添加一次
    				//所以我们为input框也设置点击事件,在事件中只要设成return false;js会自动停止添加事件
    				inputObj.click(function(){
    					return false;
    				});
    				
    				
    				/*
    				 想法:
    				 在实际应用中,我们完全可以不使用下方的功能,也就是td里一直存在input事件
    				 我们的js完全可以在第一个Input事件发生时,将隐藏的保存按钮浮现,这样方便用户修改
    				 且保存时只存储我们新编辑的,可减少数据提交量。
    				 未来如果我写自己的程序,就要用这种方法进行二次内容编辑时保存数据。
    				 * */
    				//鼠标移开后内容进行替换,这是看作者下面回车键值这处理完后改的,这样更实用
    				inputObj.mouseout(function(){
    					//获取当前文本框中的内容
						var inputtext = $(this).val();
						//将td的内容修改成文本框中的内容
						tdObj.html(inputtext);
    				});
    				
    				//处理文本框上回车和esc的操作
    				//在函数中使用event,jQuery就能帮我们获取到键值
    				inputObj.keyup(function(event){
    					//获取键值
    					var keycode = event.which;
    					//处理回车
    					if(keycode == 13)
    					{
    						//获取当前文本框中的内容
    						var inputtext = $(this).val();
    						//将td的内容修改成文本框中的内容
    						tdObj.html(inputtext);
    					}
    					//处理esc
    					if(keycode == 27)
    					{
    						//将td中的内容还原成text
    						tdObj.html(text);
    					}    					
    				});    				
    				
    			});
    			
    		});
    	</script>
	</head>
	<body>
		<table>
			<thead>
			<tr>
				<th colspan="2">鼠标点击可编辑</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>学号</td>
				<td>姓名</td>
			</tr>
			<tr>
				<td>0001</td>
				<td>张三</td>
			</tr>
			<tr>
				<td>0002</td>
				<td>李四</td>
			</tr>
			<tr>
				<td>0003</td>
				<td>王五</td>
			</tr>
			<tr>
				<td>0004</td>
				<td>赵六</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND