zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    English trip V2-B 14 Yes, I can! 是的,我能! Teacher:Russell
    I1-3 Weather Teacher:Corrine
    4-redis数据过期策略
    redis持久化
    redis优势
    解决error while loading shared libraries
    1-zookeeper基本原理和使用
    ObjectiveSQL框架让你不要再写复杂SQL
    sharding-proxy+sharding-ui安装使用配置
    vim 多行取消注释
  • 原文地址:https://www.cnblogs.com/luerniu/p/5356652.html
Copyright © 2011-2022 走看看