Jquery案例

最新推荐文章于 2025-06-04 11:39:49 发布

weixin_43422943

最新推荐文章于 2025-06-04 11:39:49 发布

阅读量476

点赞数

分类专栏：题目

本文链接：https://blog.youkuaiyun.com/weixin_43422943/article/details/89647627

版权

题目专栏收录该内容

27 篇文章

订阅专栏

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('<option value="' + list + '">' + list + '</option>');
            }
        });

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


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

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


    </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 = '<tr><td><input id="name'+(length+1)+'" type="text"></td><td><input type="text" id="price'+(length+1)+'" ></td><td><input type="text" id="count'+(length+1)+'" ></td><td></td><td><input type="button"  value="删除" οnclick="deltr(this);"/>&nbsp;<input type="button"  value="保存" οnclick="save(this,'+(length+1)+')"/></td></tr>';
            $("#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 = '<tr><td>'+name+'</td><td>'+price+'</td><td>'+count+'</td><td>'+total+'</td><td><input type="button"  value="删除" οnclick="deltr(this);"/></td></tr>';
            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>