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

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

 

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

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

 

[html][/html] view plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>购物车删除功能</title>
  5.     <meta charset=”utf-8″>
  6.     <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
  7.     <style>
  8.         a{
  9.             text-decoration: none;
  10.         }
  11.        table{
  12.         border-collapse:collapse;
  13.         border: 1px solid #ccc;
  14.        }
  15.         tr td{
  16.         border: 1px dotted #ccc;
  17.        }
  18.        td{
  19.         width: 80px;
  20.         height: 50px;
  21.         line-height: 50px;
  22.         border: 1px dotted #ccc;
  23.         text-align: center;
  24.        }
  25.        .lack{
  26.         color: #f00;
  27.        }
  28.        #info{
  29.         background: #aaa;
  30.         display: none;
  31.        }
  32.        #editAddrInfo{
  33.         display: none;
  34.         background: #ccc;
  35.        }
  36.     </style>
  37. </head>
  38. <body>
  39.     <table >
  40.         <tr>
  41.             <th>商品名称</th>
  42.             <th>价格</th>
  43.             <th>操作</th>
  44.         </tr>
  45.         <tr>
  46.             <td>tv</td>
  47.             <td class=’storeNumber’>99</td>
  48.             <td><a href=”javascript:;” class=’delete’>删除</a></td>
  49.         </tr>
  50.         <tr>
  51.             <td>link</td>
  52.             <td class=’storeNumber’>199</td>
  53.             <td><a href=”javascript:;” class=’delete’>删除</a></td>
  54.         </tr>
  55.         <tr>
  56.             <td>box</td>
  57.             <td class=’storeNumber’>9</td>
  58.             <td><a href=”javascript:;” class=’delete’>删除</a></td>
  59.         </tr>
  60.     </table>
  61.     <div id=”addr”></div>
  62.     <a href=”javascript:;” id=”addInfo”>填写收货人信息</a>
  63.     <div id=”info”>
  64.         <form>
  65.             <dl>
  66.                 <dt>name</dt>
  67.                 <dd><input type=”text” id=”name”></dd>
  68.             </dl>
  69.             <dl>
  70.                 <dt>email</dt>
  71.                 <dd><input type=”text” id=”email”></dd>
  72.             </dl>
  73.             <dl><input type=”button”  id=”submitInfo” value=”添加”></dl>
  74.         </form>
  75.     </div>
  76.     <!– 地址信息编辑框 –>
  77.     <div id=”editAddrInfo”>
  78.         <form>
  79.             <dl>
  80.                 <dt>name</dt>
  81.                 <dd><input type=”text” id=”Ename”></dd>
  82.             </dl>
  83.             <dl>
  84.                 <dt>email</dt>
  85.                 <dd><input type=”text” id=”Eemail”></dd>
  86.             </dl>
  87.             <dl><input type=”button”  id=”EAddrInfo” value=”修改”></dl>
  88.         </form>
  89.     </div>
  90.     <script type=”text/javascript”>
  91.         $(document).ready(function(){
  92.             //显示库存信息
  93.             var deleteAction = $(‘.delete’);
  94.             var storeNumber = $(‘.storeNumber’);
  95.             $.each(storeNumber, function(){
  96.                 var el = $(this);
  97.                 var number = el.text();
  98.                 var number = parseInt(number,10);
  99.                 if(number < 100 ){
  100.                     $(‘<tr><td class=”lack” colspan=”3″>库存不足</td></tr>’).insertBefore(el.parents(‘tr’));
  101.                 }
  102.             });
  103.             //删除订单
  104.             $.each(deleteAction, function(){
  105.                 var el = $(this);
  106.                 var prev = el.parents(‘tr’).prev();
  107.                 el.click(function(){
  108.                     confirm(‘确定要删除订单吗?’) && el.parents(‘tr’).remove();
  109.                     (prev.text() == ‘库存不足’ || prev.text() == ‘极少’) && prev.remove();
  110.                 });
  111.             });
  112.             //添加地址信息
  113.             var addInfo = $(‘#addInfo’);
  114.             var info = $(‘#info’);
  115.             addInfo.on(‘click’, function(){
  116.                 info.css(‘display’, ‘block’);
  117.             });
  118.             var submitInfo = $(‘#submitInfo’);
  119.             submitInfo.on(‘click’, function(){
  120.                 var name = $(‘#name’);
  121.                 var email = $(‘#email’);
  122.                 if(name.val()== ”){
  123.                     name.focus();
  124.                     return false;
  125.                 }
  126.                 if(email.val() == ”){
  127.                     email.focus();
  128.                     return false;
  129.                 }
  130.                 makeAddr(name.val(), email.val());
  131.                 info.css(‘display’,’none’);
  132.             });
  133.             //生成地址信息
  134.             function makeAddr(name, email, addr, phone, zip){
  135.                 var html = ‘<p>name: <span class=”infoName”>’ + name + ‘</span>  ‘;
  136.                     html += ’email: <span class=”infoEmail”>’ + email + ‘</span> ‘;
  137.                     html += ‘<a href=”javascript:;” class=”editAddr”>编辑</a> ‘;
  138.                     html += ‘<a href=”javascript:;” class=”deteleAddr”>删除  </a>’;
  139.                     html += ‘</p>’
  140.                 $(‘#addr’).append(html);
  141.                 //删除地址信息
  142.                 var deteleAddr = $(‘.deteleAddr’);
  143.                 $.each(deteleAddr, function(){
  144.                     var el = $(this);
  145.                     el.on(‘click’, function(){
  146.                         confirm(‘确定要删除此信息吗?’) && el.parents(‘p’).remove();
  147.                     });
  148.                 });
  149.                 //编辑地址信息
  150.                 var editAddr =  $(‘.editAddr’);
  151.                 $.each(editAddr, function(){
  152.                     var el = $(this);
  153.                     var editAddrInfo = $(‘#editAddrInfo’);
  154.                     var element = el.parents(‘p’);
  155.                     var Aname = $(‘.infoName’, element);
  156.                     var Aemail = $(‘.infoEmail’, element);
  157.                     el.on(‘click’, function(){
  158.                         //将地址信息写入到编辑框中
  159.                         editAddrInfo.css(‘display’,’block’);
  160.                         var Ename = $(‘#Ename’, editAddrInfo);
  161.                         var Eemail = $(‘#Eemail’, editAddrInfo);
  162.                         Ename.val(Aname.text());
  163.                         Eemail.val(Aemail.text());
  164.                         var submit = $(‘#EAddrInfo’);
  165.                         var result = submit.on(‘click’, function(){
  166.                             var saveName = Ename.val();
  167.                             var saveEmail = Eemail.val();
  168.                             if(saveName == ”){
  169.                                 Ename.focus();
  170.                                 return false;
  171.                             }
  172.                             if(saveEmail == ”){
  173.                                 Eemail.focus();
  174.                                 return false;
  175.                             }
  176.                             //将编辑框中的内容回写到地址信息中
  177.                             Aname.text(saveName);
  178.                             Aemail.text(saveEmail);
  179.                             editAddrInfo.css(‘display’,’none’)
  180.                         });
  181.                     });
  182.                     //将地址信息写入到编辑框中
  183.                    /* function editInfo(name, email, addr , phone, zip){
  184.                         editAddrInfo.css(‘display’,’block’);
  185.                         var Ename = $(‘#Ename’, editAddrInfo);
  186.                         var Eemail = $(‘#Eemail’, editAddrInfo);
  187.                         Ename.val(name);
  188.                         Eemail.val(email);
  189.                         var submit = $(‘#EAddrInfo’);
  190.                         var result = submit.on(‘click’, function(){
  191.                             var saveName = Ename.val();
  192.                             var saveEmail = Eemail.val();
  193.                             if(saveName == ”){
  194.                                 Ename.focus();
  195.                                 return false;
  196.                             }
  197.                             if(saveEmail == ”){
  198.                                 Eemail.focus();
  199.                                 return false;
  200.                             }
  201.                             Aname.val(saveName);
  202.                             Aemail.val(saveEmail);
  203.                             editAddrInfo.css(‘display’,’none’);
  204.                         });
  205.                     }*/
  206.                 });
  207.             }
  208.             makeAddr(‘chenke’,’chenke@126.com’);
  209.         })
  210.     </script>
  211. </body>
  212. </html>

标签