运行效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<center>
<input type="button" id="addProTop" value="添加商品(顶部)" onclick="addPro(this)">
<table border="1">
<tr>
<td>商品名称</td>
<td>市场价</td>
<td>购买数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</table>
<table border="1">
<tr>
<td>
购物车总价:¥0.0元
</td>
<td>
<input type="button" id="removeAll" value="清空购物车">
</td>
</tr>
</table>
<input type="button" id="addPro" value="添加商品(底部)" onclick="addPro(this)">
</center>
<script>
//添加商品
function addPro(btn){
var goods_name=prompt('请输入商品名称:', '');
//判断商品名称是否重复
var flag=false;
var table=document.getElementsByTagName('table')[0];
for (var i = 1; i < table.rows.length; i++) {
var name=table.rows[i].cells[0].innerText;
console.log(name);
console.log(goods_name);
if(name==goods_name){
flag=true;
}
}
//判断商品名称是否为空
if(goods_name.trim().length<=0){
alert('商品名称不能为空');
}else if(flag){
alert('商品名重复!请重新添加!');
}else{
var goods_price=prompt('请输入商品的市场价:', '');
//判断价格是否为空
if(goods_price.trim().length<=0){
alert('商品的市场价不能为空');
}else if(isNaN(goods_price)){
//判断价格是否为数字
alert('商品的价格为数字');
}else{
var table=document.getElementsByTagName('table')[0];
var flag1=(btn.id=='addProTop');
if(flag1){
var tr=table.insertRow(1);
}else{
var tr=table.insertRow();
}
var imgIndex=parseInt(Math.random()*5)+1;
while(imgvalidate("pic"+imgIndex+".jpg",flag1)){
imgIndex=parseInt(Math.random()*5)+1;
}
var img='<img src=imgs/pic'+ imgIndex +'.jpg><br>';
tr.insertCell().innerHTML=img+goods_name;
tr.insertCell().innerHTML="¥"+goods_price;
tr.insertCell().innerHTML='<input type="text" value="1" onblur="doChange(this)">';
tr.insertCell().innerHTML="¥"+goods_price;
tr.insertCell().innerHTML='<button onclick="removePro(this)">删除</button>';
}
}
sumPrice();
}
//判断图片是否重复
function imgvalidate(img,flag,index){
var tb1=document.getElementsByTagName('table')[0];
var fl=false;
if(tb1.rows.length>2){
if(flag){
fl=tb1.rows[2].cells[0].childNodes[0].src.split("imgs/")[1]==img;
}else{
fl=tb1.rows[tb1.rows.length].cells[0].childNodes[0].src.split("imgs/")[1]==img;
}
}
return fl;
}
function doChange(inp){
if(inp.value<=0){
alert('商品数量必须大于1');
inp.value=1;
}else if(inp.value%1!=0){
alert('商品数量必须为整数');
inp.value=1;
}else{
var price=inp.parentNode.previousSibling.innerHTML.substring(1);
inp.parentNode.nextSibling.innerHTML="¥"+inp.value*price;
}
sumPrice();
}
//删除
function removePro(btn){
var tr = btn.parentNode.parentNode;
var table=document.getElementsByTagName('table')[0];
table.deleteRow(tr.rowIndex);
sumPrice();
}
//清空购物车
document.getElementById('removeAll').onclick=function(){
var table=document.getElementsByTagName('table')[0];
for (var i = table.rows.length-1; i > 0; i--) {
table.deleteRow(i);
}
sumPrice();
}
//计算总价
function sumPrice(){
var table=document.getElementsByTagName('table')[0];
var sum=0;
for (var i = 1; i < table.rows.length; i++) {
sum+=Number(table.rows[i].cells[3].innerHTML.substring(1));
}
var tb=document.getElementsByTagName('table')[1];
tb.rows[0].cells[0].innerHTML="购物车总价:¥"+sum+"元";
}
</script>
</body>
</html>