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

作者：简简单单 2014-06-28

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

<div class="wrap">
	   <div class="eg">
        <
        <h2>商品信息管理</h2>
        <div id="list">
            <dl>
                <dt><a href="" onclick="return editItem(this)">修改</a><a href="" onclick="return deleteItem(this)">删除</a></dt><dd>untitle</dd>
            </dl>
        </div>
        <div class="btnAdd">
            <button id="addRecord">增加条目</button>
        </div>
    </div>
</div>
<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>

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

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

相关文章

精彩推荐