JS之DOM 添加和删除附件 联动操作

1、插入目标元素的位置 

elt.insertBefore(newNode, oldNode); 添加到elt中，child之前。
注意： elt必须是oldNode的直接父节点。

elt.removeChild(child) 删除指定的子节点

注意： elt必须是child的直接父节点。

<!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">
    
    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];//因为对于一个表，其一定有tbody这个标签，即使没有写
        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>

2、联动

省份联动

<!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"> 
    
    function showCity(){
        //维护一个二维数组存储省份对应的城市
        var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];            
    
        //获取省份对应的节点
        var provinceNode = document.getElementById("province");
        //获取省份选中的选项
        var selectIndex =  provinceNode.selectedIndex;
        //获取对应的城市
        var  cityDatas = citys[selectIndex];
        
        //找到city节点
        var cityNode = document.getElementById("city");
        
        /*
        //先清空city框所有option
        var children = cityNode.childNodes;
        for(var i = 0; i<children.length ;){ //由于在删除一个之后，游标i下移但是option被删之后自动上移，导致删除出错，故不写++i
            cityNode.removeChild(children[i]);
        }
　　　　　　for(var j=0;j<children.length;++j{ //或为这样
　　　　　　　　cityNode.removeChild(children[0]);
　　　　　　}

        */
        
        //设置options的个数。 //或者改为这样删除
        cityNode.options.length = 1 ;
       
        
        //遍历对应的所有城市然后创建对应的option添加到city上。
        for(var index = 0; index<cityDatas.length ; index++){
            var option = document.createElement("option");
            option.innerHTML = cityDatas[index];
            cityNode.appendChild(option);
        }
        
        
    
    }
    
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    省份<select id="province" onchange="showCity()">
            <option>省份</option>
            <option>广东</option>
            <option>湖南</option>
            <option>广西</option>
        </select>
    城市<select id="city"><option>城市</option></select>
    
</body>
</html>

 

posted @ 2017-02-27 12:47  mslog  阅读(1017)  评论(0)  编辑  收藏  举报