JS动态添加删除HTML元素(实例).doc

JS动态添加删除HTML元素JS技术 2010-01-27 17:41:31 阅读449 评论0 字号：大中小 增加Table行/ Example: obj = findObj(image1);function findObj(theObj, theDoc) var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf(?) 0 & parent.frames.length) theDoc = parent.framestheObj.substring(p+1).document; theObj = theObj.substring(0,p); if(!(foundObj = theDoctheObj) & theDoc.all) foundObj = theDoc.alltheObj; for(i=0; !foundObj & i theDoc.forms.length; i+) foundObj = theDoc.formsitheObj; for(i=0; !foundObj & theDoc.layers & i theDoc.layers.length; i+) foundObj = findObj(theObj,theDoc.layersi.document); if(!foundObj & document.getElementById) foundObj = document.getElementById(theObj); return foundObj;/添加一个参与人填写行function AddSignRow() /读取最后一行的行号，存放在txtTRLastIndex文本框中 var txtTRLastIndex = findObj(txtTRLastIndex,document); var rowID = parseInt(txtTRLastIndex.value); var signFrame = findObj(SignFrame,document); /添加行 var newTR = signFrame.insertRow(signFrame.rows.length); newTR.id = SignItem + rowID; /添加列:序号 var newNameTD=newTR.insertCell(0); /添加列内容 newNameTD.innerHTML = newTR.rowIndex.toString(); /添加列: 姓名 var newNameTD=newTR.insertCell(1); /添加列内容 newNameTD.innerHTML = ; /添加列:电子邮箱 var newEmailTD=newTR.insertCell(2); /添加列内容 newEmailTD.innerHTML = ; /添加列:删除按钮 var newDeleteTD=newTR.insertCell(3); /添加列内容 newDeleteTD.innerHTML = 删除; /将行号推进下一行 txtTRLastIndex.value = (rowID + 1).toString() ;/删除指定行function DeleteSignRow(rowid) var signFrame = findObj(SignFrame,document); var signItem = findObj(rowid,document); /获取将要删除的行的Index var rowIndex = signItem.rowIndex; /删除指定Index的行 signFrame.deleteRow(rowIndex); / 重新排列序号，如果没有序号，这一步省略 for(i=rowIndex;i 0; i-) signFrame.deleteRow(i); /重置最后行号为1 var txtTRLastIndex = findObj(txtTRLastIndex,document); txtTRLastIndex.value = 1; /预添加一行 AddSignRow(); 序号 用户姓名 电子邮箱   =实例二JavaScript实现动态删除节点代码 AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBB CCCCCCCCCCC DDDDDDDDDDDD EEEEEEEEEEE FFFFFFFFFFFFFFF/oTest newNode这两个变量如果在函数里边,则追加节点,var oTest = document.getElementById(test2);var newNode = document.createElement(p);/appendChild() 方法在节点的子节点列表末添加新的子节点。/insertBefore() 方法在节点的子节点列表任意位置插入新的节点。/nextSibling 属性可返回某个元素之后紧跟的元素（处于同一树层级中）。function aa(id) var oTest = document.getElementById(id); var newNode = document.createElement(p); newNode.innerHTML =Date(); oTest.appendChild(newNode);function bb(id) newNode.innerHTML =Date(); oTest.insertBefore(newNode,null);function cc(id) var oTest = document.getElementById(id); var newNode = document.createElement(p); newNode.innerHTML =Date(); insertAfter(newNode,oTest);function insertAfter(newElement, targetElement) var parent = targetElement.parentNode; if (parent.lastChild = targetElement) / 如果最后的节点是目标元素，则直接添加。因为默认是最后 parent.appendChild(newElement); else parent.insertBefore(newElement,targetElement.nextSibl