javaseday38补充(下拉菜单改变字体颜色级联菜单制作删除删除附件)

最新推荐文章于 2020-10-31 10:31:55 发布

wenchi2018

最新推荐文章于 2020-10-31 10:31:55 发布

阅读量399

点赞数

分类专栏： javase中的js和html(web)

javase中的js和html(web) 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<style type="text/css">
    .clrclass{
        height:50px;
        width:50px;
        float:left;
        margin-right:30px;
    }
    #text{
        clear:left;
        padding-top:20px;

    }
    .selClass{
        width:100px;
    }
</style>
</head>

<body>
    <script type="text/javascript">
        function changeColor(node)
        {
            var colorVal =  node.style.backgroundColor; 
            document.getElementById("text").style.color = colorVal;
        }
    </script>


    <div class="clrclass" id="clr1" style="background-color:#0F6" onclick="changeColor(this)"></div>
    <div class="clrclass" id="clr2" style="background-color:blue" onclick="changeColor(this)"></div>
    <div class="clrclass" id="clr3" style="background-color:red" onclick="changeColor(this)"></div>
    <div class="te" id="text">
        效果文字的撒打算<br/>
        效果文字的撒打算<br/>
        效果文字的撒打算<br/>
        效果文字的撒打算<br/>
    </div>
    <hr />
    <script type="text/javascript">
        function changeColor2()
        {
            var oSelectNode = document.getElementsByName("selectColor")[0];
            //获取所有的option
            /*var collOptionNodes = oSelectNode.options;
            with(oSelectNode)
            {
                alert(options[selectedIndex].innerHTML);
            }*/
            var color = oSelectNode.options[oSelectNode.selectedIndex].value;
            document.getElementById("text").style.color = color;
            //alert(oSelectNode.options[oSelectNode.selectedIndex].innerHTML);

            /*for(var x = 0;x<collOptionNodes.length;x++)
            {
                alert(collOptionNodes[x].innerHTML);    
            }   */
        }
    </script>
    <select name="selectColor" onchange="changeColor2()">
        <option value="black">选择颜色</option>
        <option value="red">红</option>
        <option value="blue">蓝</option>
        <option value="green">绿</option>
    </select>
    <select name="selectColor" onchange="changeColor3()" class="selClass">
        <option value="black">选择颜色</option>
        <option style="background-color:red" value="red">红</option>
        <option style="background-color:blue" value="blue">蓝</option>
        <option style="background-color:green" value="green">绿</option>
    </select>
</body>

    <script type="text/javascript">
        function selectCity()
        {
            var collCitys = [['选择城市'],['1','2','3','4'],['11','22','33','44']
                            ,['111','222','333','444']
                            ,['1111','2222','3333','4444']];
            //var arr = {"banben":['1','2','3','4']};
            //获取两个下拉菜单对象
            var oSelNode = document.getElementById("selid");
            var oSubNode = document.getElementById("subselid");
            //到底选择哪个省
            var index = oSelNode.selectedIndex;
            //通过角标到容器去获取对应的城市数组
            var arrCities = collCitys[index];
            //将子菜单中的内容清空
            /*for(x = 0;x<oSubNode.options.length;)
            {
                //alert(oSubNode.options.length);
                oSubNode.removeChild(oSubNode.options[x]);  
            }*/
            //清除动作
            oSubNode.length=0;
            //遍历这个数组并将这个数组的元素封装成option对象添加到子菜单中
            for(var x= 0; x<arrCities.length;x++)
            {
                var oOptNode = document.createElement("option");
                oOptNode.innerHTML = arrCities[x];
                oSubNode.appendChild(oOptNode); 
            }
        }
    </script>
    <select id="selid" onchange="selectCity()">
        <option>选择省市</option>
        <option value="banben">版本</option>
        <option>广告</option>
        <option>阿三</option>
        <option>谔谔</option>
    </select>
    <select id="subselid">
        <option>选择城市</option>

    </select>
</body>

<style type="text/css">

table a:link,table a:visited{
    color:#03F;
    text-decoration:none;
}
table a:hover{
    color:#FF3;
}
</style>
<script type="text/javascript">
    function addFile()
    {
        /*
            因为文件选取框定义在行对象中
            所以只要给表格创建新的行和单元格即可
        */  
        var oTabNode = document.getElementById("fileid");
        var oTrNode = oTabNode.insertRow();

        var oTdNode_file = oTrNode.insertCell();
        var oTdNode_del  = oTrNode.insertCell();
        oTdNode_file.innerHTML = "<input type='file'/>";
        //oTdNode_del.innerHTML = "<a href = 'javascript:void(0)' onclick='deleteFile(this)'>删除附件</a>";
        oTdNode_del.innerHTML = "<img sr='1.jpg' alt='删除' onclick='deleteFile(this)'>";
    }
    function deleteFile(node)
    {
        var oTrNode = node.parentNode.parentNode;   
        oTrNode.parentNode.removeChild(oTrNode);
    }
</script>
</head>

<body>
    <table id="fileid">
        <tr>
            <td><a href="javascript:void(0)" onclick="addFile()">添加附件件</a></td>
        </tr>
        <!--<tr>
            <td> <input type="file" /></td>
            <td><a href="javascript:void(0)">删除附件</a></td>
        </tr>-->
    </table>
</body>

wenchi2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaseday38补充(下拉菜单改变字体颜色级联菜单制作删除删除附件)

<style type="text/css"> .clrclass{ height:50px; width:50px; float:left; margin-right:30px; } #text{ clear:left; padding-top:20px; } .s
复制链接

扫一扫