您的位置：首页 > Web前端 > JavaScript

javascript之DOM编程增加附件

2016-05-24 20:53 676 查看

在开始这个案例之前，需要学习一下有关于根据子关系节点获取标签的几个方法。罗列如下

/*通过关系(父子关系、兄弟关系)找标签。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>

效果展示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航