Jquery案例

1. 三级联动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            margin: 0px auto;
            width: 400px;
            height: 400px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

        var list1 = new Array(2);
        list1["湖北省"] = ["武汉市", "襄樊市"];
        list1["湖南省"] = ["长沙市", "浏阳市"];
        list1["湖北省"]["武汉市"] = ["洪山区", "江夏区", "武昌区", "汉口区"];
        list1["湖北省"]["襄樊市"] = ["樊城区", "襄城区"];
        list1["湖南省"]["长沙市"] = ["厂区", "杀区"];
        list1["湖南省"]["浏阳市"] = ["溜区", "羊区"];


        $(function () {
            //遍历一维数组 动态添加
            for (var list in list1) {
                $("#province").append(' list + '">' + list + '');
            }
        });

        function provinceSelect() {
            //为了防止城市的重复出现  每次调用要清空下拉框
            $("#city").empty();
            //添加一个请选择
            $("#city").append("");
            $("#region").empty();
            //添加一个请选择
            $("#region").append("");


            //3.选择省份后 将该省份的市 添加到第二个下拉框
            //3.1获取选择的省份
            var province = $("#province").val();
            //3.2获取该省份的市
            for (var i = 0; i < list1[province].length; i++) {
                $("#city").append(' list1[province][i] + '">' + list1[province][i] + '');
            }
        }

        function citySelect(city) {
            //为了防止城市的重复出现  每次调用要清空下拉框
            $("#region").empty();
            //添加一个请选择
            $("#region").append("");
            //1.获取选择的城市名称
            var city = $(city).val();
            //2.获取省份
            var province = $("#province").val();
            //3.通过 省份和城市得到 数组中的区域
            for (var i = 0; i < list1[province][city].length; i++) {
                $("#region").append(' list1[province][city][i] + '">' + list1[province][city][i] + '');
            }
        }


    </script>
</head>
<body>
<div>
    <select name="province" id="province" onchange="provinceSelect()">
        <option>请选择</option>
    </select>
    <select id="city" onchange="citySelect(this)">
        <option>请选择</option>
    </select>
    <select id="region">
        <option>请选择</option>
    </select>
</div>
</body>
</html>

2. 动态表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        .h {
            display: none;
        }

        .s {
            display: block;
        }
    </style>

    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        function add() {
            var length = $("#tab").children().length;
            var tr = '+(length+1)+'" type="text">+(length+1)+'" >+(length+1)+'" > +(length+1)+')"/>';
            $("#tab").append(tr);
        }
        function deltr( input){
            var tr = $(input).parents("tr");
            tr.remove();
        }
        function save(input, num){
            //获取一行的值
            var name=$("#name"+num).val();
            var price=$("#price"+num).val();
            var count=$("#count"+num).val();
            var total=parseFloat(price)*parseInt(count);
            var trnew = ''+name+''+price+''+count+''+total+'';
            var tr = $(input).parents("tr");
            tr.replaceWith(trnew);
        }

    </script>
</head>
<body>
<table width="800" border="1" cellpadding="5" cellspacing="5px" style="line-height:30px;">
    <thead>
    <tr>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>价格</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tab">
    <tr>
        <td>凉鞋</td>
        <td>99.0</td>
        <td onclick="edit(1);">1</td>
        <td>99.0</td>
        <td><input type="button" value="删除" onclick='deltr(this);'/></td>
    </tr>

    <tr>
        <td>裙子</td>
        <td>199.0</td>
        <td onclick="edit(2)">2</td>
        <td>398.0</td>
        <td><input type="button" value="删除" onclick='deltr(this);'/></td>
    </tr>

    </tbody>
</table>
<div id="cunt">
</div>
<input type="button" value="添加新商品" onclick=" add();"/>
</body>
</html>

你可能感兴趣的:(题目)