首页 > 代码库 > 放假(三)

放假(三)

2024-08-26 15:13:45   219人阅读

1.删除功能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除功能</title>
    <script type="text/javascript">
    function delTr(id){
        var trObj = document.getElementById(id);
        if(window.confirm("主公,三思啊!!!")){
            trObj.parentNode.removeChild(trObj);
        }
    }
    function changeColor_over(trObj){
        trObj.style.backgroundColor = "#ccc";
    }
    function changeColor_out(trObj){
        trObj.style.backgroundColor = "#fff";
    }
    </script>
</head>
<body>
<table width="600" border="1" align="center">
        <caption><h2>购物车清单</h2></caption>
        <tr>
            <th>商品名</th>
            <th>单价</th>
            <th>数量</th>
            <th>功能</th>
        </tr>
        <tr id="list_01" onm ouseover="changeColor_over(this)" onm ouseout="changeColor_out(this)">
            <td>1.三体(全三册)</td>
            <td align="center">&yen;45.00</td>
            <td align="center">1</td>
            <td align="center"><a href="javascript:void(0)" onclick="delTr(‘list_01‘)">删除</a></td>
        </tr>
        <tr id="list_02" onm ouseover="changeColor_over(this)" onm ouseout="changeColor_out(this)">
            <td>2.解忧杂货店</td>
            <td align="center">&yen;28.00</td>
            <td align="center">1</td>
            <td align="center"><a href="javascript:void(0)" onclick="delTr(‘list_02‘)">删除</a></td>
        </tr>
        <tr id="list_03" onm ouseover="changeColor_over(this)" onm ouseout="changeColor_out(this)">
            <td>3.人类简史:从动物到上帝</td>
            <td align="center">&yen;45.00</td>
            <td align="center">1</td>
            <td align="center"><a href="javascript:void(0)" onclick="delTr(‘list_03‘)">删除</a></td>
        </tr>
    </table>    
</body>
</html>

2.二级联动:三级联动还没想出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级联动菜单</title>
    <script type="text/javascript">
    arr_province = ["请选择省份","北京市","广东省","湖南省"];
    arr_city = [
                    ["请选择城市"],
                    ["海淀区","宣武区","朝阳区","房山区"],
                    ["广州市","深圳市","清远市","罗定市"],
                    ["长沙市","常德市","岳阳市","永州市"],
    ];
    arr_area = [
                    ["请选择地区"],
                    [["中关村","北理工"],["宣区","武区"],["朝区","阳区"],["房山","良乡"]]
    ]
    window.onload = function(){    
        //在省份下拉列表中写入省份数组
        var province = document.form1.province;
        var city = document.form1.city;
        var area = document.form1.area;
        province.length = arr_province.length;
        for(var i=0; i<province.length; i++){
            province.options[i].text = arr_province[i];
            province.options[i].value = arr_province[i];
        }
        province.selectedIndex = 0;
        var index = province.selectedIndex;
        //在省份下拉列表中写入城市数组
        city.length = arr_city[index].length;
        for(var j=0; j<city.length; j++){
            city.options[j].text = arr_city[index][j];
            city.options[j].value = arr_city[index][j];
        }
    }
    function changeSelected(changedIndex){
        var city = document.form1.city;
        city.length = arr_city[changedIndex].length;
        for(var k=0; k<city.length; k++){
            city.options[k].text = arr_city[changedIndex][k];
            city.options[k].value = arr_city[changedIndex][k];
        }

    }
    </script>
</head>
<body>
<form name="form1" method="post">
省份:<select name="province" onchange="changeSelected(this.selectedIndex)"></select>
城市:<select name="city"></select>
地区:<select name="area"></select>
</form>    
</body>
</html>

 

放假(三)


联系
我们