动态生成地址信息和编辑、删除信息管理
而收货地址可以添加、编辑、和删除
具体的代码如下：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>
