亚美平台官网教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

首页 php教程 asp.net教程手机开发 css教程网页制作办公数码网页特效 flash教程

当前位置： 首页 > 网页特效 > 页面特效 > javascript动态增加删除修改条目实例代码

推荐专题

最新下载

1

记忆重现破解版
大小：1,008.3 MB 类型：
2

记忆重现免费版
大小：1,008.3 MB 类型：
3

记忆重现免登陆版
大小：1,008.3 MB 类型：
4

记忆重现完整版
大小：1,008.3 MB 类型：
5

记忆重现全章节破解版
大小：1,008.3 MB 类型：
6

记忆重现黑船破解版
大小：1,008.3 MB 类型：
7

记忆重现汉化版
大小：1,008.3 MB 类型：策略塔防
8

火柴人联盟2百度版
大小：244.7 MB 类型：动作竞技
9

火柴人联盟2无敌版
大小：244.7 MB 类型：回合网游
10

火柴人联盟2九游版
大小：244.7 MB 类型：动作竞技

热门教程

1

我emo了是什么梗我emo了是什么意思
时间：2021-02-20 类型：互联网加
2

蚌埠住了是什么梗蚌埠住了是什么意思
时间：2021-01-11 类型：互联网加
3

爱字幕如何换脸爱字幕换脸方法
时间：2021-08-20 类型：手机软件
4

田园女是什么梗田园女是什么意思
时间：2021-06-28 类型：互联网加
5

容嬷嬷扎针是什么梗容嬷嬷扎针是什么意思
时间：2021-02-04 类型：互联网加
6

bushi是什么梗 bushi是什么意思
时间：2020-04-21 类型：互联网加
7

CY是什么梗 CY是什么意思
时间：2020-10-21 类型：互联网加
8

夹子音如何训练夹子音训练方法
时间：2021-06-21 类型：互联网加
9

格局小了是什么梗格局小了是什么意思
时间：2021-02-25 类型：互联网加
10

原神无想刃狭间六把剑如何解密原神无想刃狭间六把剑解密攻略
时间：2021-07-22 类型：游戏攻略

javascript动态增加删除修改条目实例代码

时间：2014-06-28 00:00:00 编辑：简简单单来源：转载

提示：您可以先修改部分代码再运行

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 微软雅黑;
	font-size: 14px;
	line-height: 24px;
}
.wrap {
	width: 960px;
	margin: 0 auto;
}
.wrap h2 {
	padding: 10px;
	text-align: center;
}
#list {
	padding-top: 10px;
}
#list dl {
	position: relative;
	top: 0;
	left: 0;
	border-top: #993 1px dashed;
}
#list dl dt {
	position: absolute;
	right: 0;
	width: 130px;
	padding: 0 10px;
	text-align: right;
}
#list dl dt a {
	margin-right: 10px;
	line-height: 40px;
	color: #333;
	text-decoration: none;
}
#list dl dt a:hover {
	color: #990;
}
#list dl dd {
	height: 40px;
	line-height: 40px;
	overflow: hidden;
	margin-right: 150px;
	padding: 0 10px;
}
#list dl dd input {
	width: 250px;
	height: 30px;
	line-height: 30px;
	font-family: 微软雅黑;
	font-size: 14px;
}
.btnAdd {
	border-top: #990 1px solid;
	padding-top: 10px;
}
.btnAdd button {
	width: 120px;
	height: 40px;
	line-height: 40px;
	background-color: #993;
	border: #993 1px solid;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;
	-moz-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;
	-o-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;
	-ms-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;
	-webkit-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;
}
</style>

<
        <h2>商品信息管理</h2>
        
            <dl>
                <dt><a href="" onclick="return editItem(this)">修改</a><a href="" onclick="return deleteItem(this)">删除</a></dt><dd>untitle</dd>
            </dl>
        
        
            <button id="addRecord">增加条目</button>

<script type="text/javascript">
	var addRecord = document.getElementById("addRecord");
	addRecord.onclick=function(){
		var list = document.getElementById("list");
		var newDl = document.createElement("dl");
		
		var newDt = document.createElement("dt");
		var newDd = document.createElement("dd");
		
		var newA = document.createElement("a");
		var newA1 = document.createElement("a");
		
		newA.setAttribute('href','');
		newA.setAttribute('onclick','return editItem(this)');
		newA1.setAttribute('href','');
		newA1.setAttribute('onclick','return deleteItem(this)');
		
		var txtEdit = document.createTextNode("修改");
		var txtDel = document.createTextNode("删除");
		
		newA.appendChild(txtEdit);
		newA1.appendChild(txtDel);
		
		newDt.appendChild(newA);
		newDt.appendChild(newA1);
		newDd.appendChild(document.createTextNode("untitle"));
		
		newDl.appendChild(newDt);
		newDl.appendChild(newDd);
		
		list.appendChild(newDl);
					
	}
	
	function editItem(obj){
		
		var objParent = obj.parentNode;
		var objDd =  objParent.nextSibling;
		var textDd =  objDd.innerHTML;
		//alert(objDd.nodeName);
		objDd.innerHTML ="<input type='text' value='" + textDd + "' />";
		
		var inputbox = objDd.getElementsByTagName('input');
		inputbox[0].focus();
		
		obj.innerHTML = "保存";
		obj.setAttribute('href','');
		obj.setAttribute('onclick','return saveItem(this)');
		
		return false;
	}
	
	function saveItem(obj){
		var objParent = obj.parentNode;
		var objDd =  objParent.nextSibling;
		var inputbox = objDd.getElementsByTagName('input');
		var txtTitle = inputbox[0].value;
		objDd.innerHTML = txtTitle;
		obj.innerHTML = '修改';
		obj.setAttribute('onclick','return editItem(this)');
		
		return false;
	}
	
	function deleteItem(obj){
		var elm = obj.parentNode.parentNode;
		var list = document.getElementById('list');
		list.removeChild(elm);
		return false;
	}
</script>

</td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一篇： Win 7下怎么启用和禁用IE浏览器多窗口选项卡功能？
下一篇： css中元素水平垂直居中4种方法介绍

相关文章

网站留言

热门栏目

亚美平台官网教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2021 hrtyss.com AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理