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>

  • 相关阅读:
    网络七层模型
    border-radius 50% 和100%
    数据绑定
    前端一些基础的重要的知识2
    用 ul 和 li 模拟select控件
    两列布局
    盒子的水平垂直居中几种方法
    TCP时间戳
    帧聚合
    skb buff数据结构
  • 原文地址:https://www.cnblogs.com/luerniu/p/5356652.html
Copyright © 2011-2022 走看看