动态生成地址信息和编辑、删除信息管理

最新推荐文章于 2020-09-16 14:09:33 发布

chenke__hxx

最新推荐文章于 2020-09-16 14:09:33 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery javascript

本文链接：https://blog.youkuaiyun.com/chenke__hxx/article/details/11700033

javascript 同时被 2 个专栏收录

21 篇文章

订阅专栏

jquery

4 篇文章

订阅专栏

本文介绍了一个商场管理系统中的库存管理和收货地址管理功能。库存管理会根据库存数量显示库存状态，当库存少于100时显示库存不足。收货地址管理包括添加、编辑和删除地址信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我现在正在进行一个商场的项目开发，你们知道竟然是商场管理，那就肯定会遇到与下的这几个功能了，比如库存管理，根据库存数量，显示库存状态。添加，编辑、删除订单和收货地址信息了。首先是根据产品数量，显示库存状态：小于100，显示库存不足，大于100不显示；

而收货地址可以添加、编辑、和删除

具体的代码如下：css部分没有认真写，大家将就着看吧

<!DOCTYPE html>
<html>
<head>
    <title>购物车删除功能</title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
        a{
            text-decoration: none;
        }
       table{
        border-collapse:collapse;
        border: 1px solid #ccc;
       }
        tr td{
        border: 1px dotted #ccc;
       }
       td{
        width: 80px;
        height: 50px;
        line-height: 50px;
        border: 1px dotted #ccc;
        text-align: center;
       }
       .lack{
        color: #f00;
       }
       #info{
        background: #aaa;
        display: none;
       }
       #editAddrInfo{
        display: none;
        background: #ccc;
       }
    </style>
</head>
<body>
    <table >
        <tr>
            <th>商品名称</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>tv</td>
            <td class='storeNumber'>99</td>
            <td><a href="javascript:;" class='delete'>删除</a></td>
        </tr>
        <tr>
            <td>link</td>
            <td class='storeNumber'>199</td>
            <td><a href="javascript:;" class='delete'>删除</a></td>
        </tr>
        <tr>
            <td>box</td>
            <td class='storeNumber'>9</td>
            <td><a href="javascript:;" class='delete'>删除</a></td>
        </tr>
    </table>
    
    
    <div id="addr"></div>
    <a href="javascript:;" id="addInfo">填写收货人信息</a>
    <div id="info">
        <form>
            <dl>
                <dt>name</dt>
                <dd><input type="text" id="name"></dd>
            </dl>
            <dl>
                <dt>email</dt>
                <dd><input type="text" id="email"></dd>
            </dl>
            <dl><input type="button"  id="submitInfo" value="添加"></dl>
        </form>
    </div>
    <!-- 地址信息编辑框 -->
    <div id="editAddrInfo">
        <form>
            <dl>
                <dt>name</dt>
                <dd><input type="text" id="Ename"></dd>
            </dl>
            <dl>
                <dt>email</dt>
                <dd><input type="text" id="Eemail"></dd>
            </dl>
            <dl><input type="button"  id="EAddrInfo" value="修改"></dl>
        </form>
    </div>
    
    <script type="text/javascript">
        $(document).ready(function(){
            //显示库存信息
            var deleteAction = $('.delete');
            var storeNumber = $('.storeNumber');
            $.each(storeNumber, function(){
                var el = $(this);
                var number = el.text();
                var number = parseInt(number,10);
                if(number < 100 ){
                    $('<tr><td class="lack" colspan="3">库存不足</td></tr>').insertBefore(el.parents('tr'));
                }
            });

            //删除订单
            $.each(deleteAction, function(){
                var el = $(this);
                var prev = el.parents('tr').prev();
                el.click(function(){ 
                    confirm('确定要删除订单吗？') && el.parents('tr').remove();
                    (prev.text() == '库存不足' || prev.text() == '极少') && prev.remove();
                });
            });

            //添加地址信息
            var addInfo = $('#addInfo');
            var info = $('#info');
            addInfo.on('click', function(){
                info.css('display', 'block');
            });
            var submitInfo = $('#submitInfo');
            submitInfo.on('click', function(){
                var name = $('#name');
                var email = $('#email');
                if(name.val()== ''){
                    name.focus();
                    return false;
                }
                if(email.val() == ''){
                    email.focus();
                    return false;
                }
                makeAddr(name.val(), email.val());
                info.css('display','none');
            });
    
            //生成地址信息
            function makeAddr(name, email, addr, phone, zip){
                var html = '<p>name: <span class="infoName">' + name + '</span>  ';
                    html += 'email: <span class="infoEmail">' + email + '</span> ';
                    html += '<a href="javascript:;" class="editAddr">编辑</a> ';
                    html += '<a href="javascript:;" class="deteleAddr">删除  </a>';
                    html += '</p>'
                $('#addr').append(html); 

                //删除地址信息
                var deteleAddr = $('.deteleAddr');
                $.each(deteleAddr, function(){
                    var el = $(this);
                    el.on('click', function(){
                        confirm('确定要删除此信息吗？') && el.parents('p').remove();
                    });             
                });

                //编辑地址信息
                var editAddr =  $('.editAddr');
                $.each(editAddr, function(){
                    var el = $(this);
                    var editAddrInfo = $('#editAddrInfo');
                    var element = el.parents('p');
                    var Aname = $('.infoName', element);
                    var Aemail = $('.infoEmail', element);
                    el.on('click', function(){
                        //将地址信息写入到编辑框中
                        editAddrInfo.css('display','block');
                        var Ename = $('#Ename', editAddrInfo);
                        var Eemail = $('#Eemail', editAddrInfo);
                        Ename.val(Aname.text());
                        Eemail.val(Aemail.text());

                        var submit = $('#EAddrInfo');
                        var result = submit.on('click', function(){
                            var saveName = Ename.val();
                            var saveEmail = Eemail.val();
                            if(saveName == ''){
                                Ename.focus();
                                return false;
                            }
                            if(saveEmail == ''){
                                Eemail.focus();
                                return false;
                            }

                            //将编辑框中的内容回写到地址信息中
                            Aname.text(saveName);
                            Aemail.text(saveEmail);
                            editAddrInfo.css('display','none')
                        });
                    });

                    //将地址信息写入到编辑框中
                   /* function editInfo(name, email, addr , phone, zip){
                        editAddrInfo.css('display','block');
                        var Ename = $('#Ename', editAddrInfo);
                        var Eemail = $('#Eemail', editAddrInfo);
                        Ename.val(name);
                        Eemail.val(email);
                        var submit = $('#EAddrInfo');
                        var result = submit.on('click', function(){
                            var saveName = Ename.val();
                            var saveEmail = Eemail.val();
                            if(saveName == ''){
                                Ename.focus();
                                return false;
                            }
                            if(saveEmail == ''){
                                Eemail.focus();
                                return false;
                            }
                            Aname.val(saveName);
                            Aemail.val(saveEmail);
                            editAddrInfo.css('display','none');
                        });
                    }*/
                });
            }
            makeAddr('chenke','chenke@126.com');
        })
    </script>
</body>  
</html>