HTML增加附件

<!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中，child之前。
    注意： 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);
    }
    
    
    //删除附件
    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>

posted on 2016-04-05 20:24  卢二牛  阅读(1048)  评论(0)    收藏  举报

导航