JS--双击表单修改内容 - html

首页 > 博客列表 > JS--双击表单修改内容

博主信息

博文 250

粉丝 3

访问量 370432

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	<table id="mytab" border="1" width="800" align="center">
		<tr>
			<td>ID</td>
			<td>Name</td>
			<td>Sex</td>
			<td>Age</td>
		</tr>
		<tr>
			<td>1</td>
			<td>jack</td>
			<td>男</td>
			<td>19</td>
		</tr>
		<tr>
			<td>1</td>
			<td>jack</td>
			<td>男</td>
			<td>19</td>
		</tr>
		<tr>
			<td>1</td>
			<td>jack</td>
			<td>男</td>
			<td>19</td>
		</tr>
		<tr>
			<td>1</td>
			<td>jack</td>
			<td>男</td>
			<td>19</td>
		</tr>
		<tr>
			<td>1</td>
			<td>jack</td>
			<td>男</td>
			<td>19</td>
		</tr>
	</table>
</body>
	<script type="text/javascript">
		//获取表格对象
		var tb = document.getElementById('mytab');
		//遍历出表格和单元格
		for(var i=1;i<tb.rows.length;i++){
			//循环出所有的表格
			for(var j=0;j<tb.rows[i].cells.length;j++){
				tb.rows[i].cells[j].onclick = function(){
				//使得这个被点击的事件变成一个input标签
				this.innerHTML = '<input type="text" value="'+this.innerHTML+'" id="inp">';
				//获取到双击添加的文本框时间
				var inp = document.getElementById('inp');
				//获取焦点事件
				inp.focus();
				//失去焦点事件
				inp.onblur = function(){
				//需要将当前input理念的内容防止到td当中
				this.parentNode.innerHTML = this.value;
			}
				}
			}
		}
	</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例