点击元素变输入框,更改值后回车变成新值

By xyp-hf

Update date:

欢迎访问CSDN博客专栏CSDN专栏 Java全栈之路,Github主页。

"点击元素变输入框,更改值后回车变成新值"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>点击元素变输入框</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
				$.each($("tbody tr"),function(){
					//获取tr中的子元素 获取第三列
					var td = $(this).children("td:eq(2)");
					td.css("color","red");
					td.click(tdClick);
				});
		});
		function tdClick(){
			/*  第一步：获取点击对象 获取文本 清空对象中的内容 */
			//获取当前对象
			var td = $(this);
			//获取当前点击对象的文本
			var tdText = td.text();
			//清空点击对象td中的内容
			td.empty();

			/* 第二步：创建一个文本框的元素 */
			//创建一个文本框元素
			var ipt = $("<input>");
			//将获取到的对象文本设置为输入框的value
			ipt.val(tdText);
			//设置文本框的宽高等于输入框的宽高
			ipt.width(td.width());
			ipt.height(td.height());
			//将创建的文本框添加到td中
			td.append(ipt);
			//触发选择事件,输入框的文本自动被选中
			ipt.trigger("select");
			//当键盘按下时
			/* 当按下回车键时更改并提交数据 */
			ipt.keydown(function(e){
				//当按下回车后 回车键键值等于13
				if(e.keyCode==13){
					td.text(ipt.val());
					//通过ajax将数据提交给后端

					//绑定点击事件
					td.click(tdClick);
				}
			});
			//当文本框出现,解绑点击事件
			td.unbind(tdClick);
		}
	</script>
<style type="text/css">
	h1{text-align: center;}
	table{margin: 0 auto;width: 603px;height: 300px;}
	table,th,td{border: 1px solid #000000;border-collapse: collapse;}
	td{width: 200px;text-align: center;}
	thead tr{background-color:#434343;color: #ffffff;}
	tbody tr:nth-of-type(odd){ background:#767676;}
	tbody tr:nth-of-type(even){ background:#e2e2e2;} 
</style>
</head>
<body>
<h1>需要说明:点击元素变输入框,更改值后回车变成新值</h1>
<table>
	<thead>
		<tr><th>账号</th><th>姓名</th><th>余额(点击该列可编辑)</th></tr>
	</thead>
	<tbody>
		<tr><td>1001</td><td>张三</td><td>20000</td></tr>
		<tr><td>1002</td><td>李四</td><td>30000</td></tr>
		<tr><td>1003</td><td>王五</td><td>40000</td></tr>
		<tr><td>1004</td><td>赵六</td><td>50000</td></tr>
		<tr><td>1005</td><td>孙七</td><td>60000</td></tr>
		<tr><td>1006</td><td>周八</td><td>70000</td></tr>
		<tr><td>1007</td><td>鲁九</td><td>80000</td></tr>
		<tr><td>1008</td><td>郑十</td><td>90000</td></tr>
	</tbody>
</table>
</body>
</html>
jQuery