javascript之DOM编程增加附件
来源:互联网 发布:重叠覆盖优化案例 编辑:程序博客网 时间:2024/06/05 03:53
在开始这个案例之前,需要学习一下有关于根据子关系节点获取标签的几个方法。罗列如下
/*通过关系(父子关系、兄弟关系)找标签。parentNode获取当前元素的父节点。childNodes获取当前元素的所有下一级子元素。firstChild获取当前节点的第一个子节点。lastChild获取当前节点的最后一个子节点。------------------------------------------------------------nextSibling获取当前节点的下一个节点。(兄节点)previousSibling获取当前节点的上一个节点。(弟节点)我们可以通过标签的类型进行判断筛选:文本节点的类型: 3注释的节点类型: 8标签节点的类型: 1 */
<!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><script type="text/javascript"> /*插入目标元素的位置 elt.insertBefore(newNode, oldNode);添加到elt中,oldNode之前。注意: elt必须是oldNode的直接父节点。 elt.removeChild(child)删除指定的子节点注意: elt必须是child的直接父节点。*/function addFile(){//先要创建一个tr对象var trNode = document.createElement("tr"); //创建td对象var tdNode1 = document.createElement("td");var tdNode2 = document.createElement("td");//tdNode1.innerHTML ="<input type='file'/>";tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";//把td的节点添加到tr节点上trNode.appendChild(tdNode1);trNode.appendChild(tdNode2);var tbodyNode = document.getElementsByTagName("tbody")[0];var lastRow = document.getElementById("lastRow");tbodyNode.insertBefore(trNode,lastRow);//在lastRow这个节点前添加上trNode。tbody时lastRow(tr)的父节点}//删除附件function delFile(aNode){var trNode = aNode.parentNode.parentNode;var tbodyNode = document.getElementsByTagName("tbody")[0];tbodyNode.removeChild(trNode);} </script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table> <tr> <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td> </tr> <tr id="lastRow"> <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td> </tr> </table></body></html>效果展示:
0 0
- javascript之DOM编程增加附件
- JavaScript之DOM编程
- JavaScript学习之DOM编程
- JavaScript之DOM编程(一)
- Javascript之DOM简单编程
- 浅谈javascript DOM编程之分离javascript
- web前端之JavaScript DOM编程艺术之DOM
- web前端之JavaScript DOM编程艺术之CSS-DOM
- javascript之DOM事件驱动编程
- 高性能JavaScript之DOM编程
- JavaScript DOM 编程之基础篇
- JavaScript DOM 编程之扩展篇
- JavaScript DOM 编程之高级篇
- javascript之DOM编程正则表达式引入
- javascript DOM编程学习心得之基础
- javascript之Dom编程艺术一
- javascript之Dom编程艺术二
- javascript之Dom编程艺术三
- Android酷炫实用的开源框架(UI框架)
- 建立领域模型
- 一个IO传奇的一生-1
- C++之数组
- Java数组预处理实现费切那波数列
- javascript之DOM编程增加附件
- bzoj 3624: [Apio2008]免费道路(并查集+生成树+乱搞)
- 栈内存与堆内存与排序
- 设计模式之单例模式
- bitbake简单的helloworld expamle
- SAP Web IDE - sapui5开发工具
- 二叉搜索树
- KMP
- 按位与、或、异或等运算方法