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