修改文本框的值

最新推荐文章于 2021-06-03 21:27:22 发布

信管117229谢胜祥

最新推荐文章于 2021-06-03 21:27:22 发布

阅读量1.1k

点赞数

分类专栏：前端js基础学习文章标签：函数传参

本文链接：https://blog.csdn.net/x1432553805/article/details/81984437

版权

前端js基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码如下：

<!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>
*{margin:0;padding:0;}
li {list-style:none;}
.menu {width:300px;margin:20px auto;border:1px solid #36F;}
.menu h4 {text-indent:20px;color:#FFF;background:#0C0;height:30px;line-height:30px;}
.menu li {padding-left:10px;border-bottom:1px solid #CCC;}
.show,.hide {height:40px;line-height:40px;}
.show span {float:left; margin-left:10px;}
.show a {float:right;margin-right:20px;}
.hide {display:none;}
.hide input {border:1px solid #096;height:25px;line-height:25px;}
.hide a {color:#0C6;}
</style>

<script>
window.onload = function(){
	var oUl = document.getElementById('list');
	var aLi = oUl.getElementsByTagName('li');
	
	for(var i= 0; i<aLi.length;i++)
		Edit(aLi[i]);
	
	function Edit(li){
		var aDiv = li.getElementsByTagName('div');
		var oSpan = li.getElementsByTagName('span')[0];
		var aA = li.getElementsByTagName('a');
		var oInput = li.getElementsByTagName('input')[0];
		//编辑
		aA[0].onclick = function (){
			aDiv[0].style.display = 'none';
			aDiv[1].style.display = 'block';
			oInput.value = oSpan.innerHTML;
		};
		//保存
		aA[1].onclick = function (){
			aDiv[0].style.display = 'block';
			aDiv[1].style.display = 'none';
			oSpan.innerHTML = oInput.value;
		};
		//取消
		aA[2].onclick = function (){
			aDiv[0].style.display = 'block';
			aDiv[1].style.display = 'none';
		};
	};
};
</script>
</head>

<body>
<div class="menu">
<h4>分类名称</h4>
<ul id="list">
<li>
<div class="show">
<span>abcd</span>
<a href="#">编辑</a>
</div>
<div class="hide"> 
<input type="text" />
<a href="#" >保存</a>
<a href="#" >取消</a>
</div>
</li>
<li>
<div class="show">
<span>猪猪侠</span>
<a href="#">编辑</a>
</div>
<div class="hide">
<input type="text" />
<a href="#" >保存</a>
<a href="#" >取消</a>
</div>
</li>
</ul>
</div>
</body>
</html>

信管117229谢胜祥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
修改文本框的值

代码如下：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&am
复制链接

扫一扫