[javascript学习指南]javascript动态增加删除修改条目实例代码

更新时间：2019-06-17 来源：php常用代码手机版 字体：大中小

【www.bbyears.com--php常用代码】

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

<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>
                修改删除untitle
            </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.nextSib<a href="http://www.bbyears.com/clist-185-1.html" target="_blank" class="keylink">ling</a>;
		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.nextSib<a href="http://www.bbyears.com/clist-185-1.html" target="_blank" class="keylink">ling</a>;
		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>

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

本文来源：http://www.bbyears.com/jiaocheng/54582.html

上一篇下一篇

链接：http://www.bbyears.com/jiaocheng/54582.html
[javascript学习指南]javascript动态增加删除修改条目实例代码(转载时请注明本文出处及链接)

猜你感兴趣

热门标签

更多>>

本类排行

本类最新

更多>>