<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
border: 1px black solid;
width: 900px;
margin: 0px auto;
}
fieldset {
width: 800px;
margin: 0px auto;
margin-bottom: 30px;
}
tr{
text-align: center;
display: inline-block;
}
#txt{
width: 40px;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="text-align: center;">购物车</h2>
<fieldset>
<legend>商品信息</legend>
商品名：<input type="text" id="goodsname">
单价：<input type="text" id="goodsprice">
数量：<input type="text" id="goodscount">
<input type="button" value="添加商品" onclick="add(this)">
</fieldset>
<fieldset>
<legend>购物车</legend>
<input type="button" value="批量删除" onclick="delCheck()"><br>
<table border="1px" cellspacing="0" id="tab">
<tr>
<td style="width: 150px;"><input type="checkbox" onclick="checkAll()" id="xuan">全选/全不选</td>
<td style="width: 250px;">商品名</td>
<td style="width: 100px;">单价</td>
<td style="width: 100px;">数量</td>
<td style="width: 100px;">小计</td>
<td style="width: 100px;">操作</td>
</tr>
</table>
<div id="goodslist" style="border: none;width: 800px;"></div>
总价：<span id="total">0</span>元
</fieldset>
</div>
<script type="text/javascript">
//添加商品
function add(btn) {
var fa=btn.parentNode;
var zis=fa.children;
var name=zis[1];
var price=zis[2];
var index=readd(name.value,price.value);
if(index==-1){
var str=tmp.innerHTML;
var s=str.replace("{GNAME}", goodsname.value)
.replace("{GPRICE}",goodsprice.value)
.replace("{GCOUNT}",goodscount.value)
.replace("{GXJ}",(Number(goodsprice.value) * Number(goodscount.value)));
// var tds = "";
// tds += "<td style='width: 150px;'><input type='checkbox'></td>";
// tds += "<td style='width: 250px;'>" + goodsname.value + "</td>";
// tds += "<td style='width: 100px;'>" + goodsprice.value + "</td>";
// tds += "<td style='width: 100px;'>" +
// "<input type='button' value='-' onclick='btnModify(this,-1)'/>" +
// "<input type='text' id='txt' value='" +goodscount.value+ "' onblur='txtModify(this)'/>"+
// "<input type='button' value='+' onclick='btnModify(this,1)'/>" +
// "</td>";
// tds += "<td style='width:100px'>" + (Number(goodsprice.value) * Number(goodscount.value)) + "</td>";
// tds+="<td><input type='button' value='删除' style='width:100px' onclick='del(this)'/></td>";
var newtr = document.createElement("tr");
newtr.style.border="1px black solid";
newtr.style.marginTop="8px";
newtr.innerHTML =s;
goodslist.appendChild(newtr);
goodslist.appendChild(newtr);
total();
}else{
//重复添加
var scr = document.getElementById("goodslist");
var trs = scr.getElementsByTagName("tr");
var inde=parseInt(index);
tds=trs[inde].getElementsByTagName("td");
var inputs=trs[inde].getElementsByTagName("input");
inputs[2].value=parseInt(inputs[2].value)+parseInt(goodscount.value);
var m=parseInt(inputs[2].value)*parseInt(tds[2].innerHTML);
tds[4].innerHTML=m;
total();
}
}
//删除商品
function del(obj){
if (window.confirm("你确定要删除吗？")) {
var tr = obj.parentNode.parentNode;
tr.remove();
total();
}
else {
return false;
}
}
//计算总价
function total(){
var scr = document.getElementById("goodslist");
var trs = scr.getElementsByTagName("tr");
var sum = 0;
for(var i=0 ;i<trs.length;i++){
var tds = trs[i].getElementsByTagName("td");
var m = tds[4].innerHTML;
sum += Number(m);
}
var all = document.getElementById("total");
all.innerHTML = sum;
}
//判断是否重复添加或是否是同种商品的不同价位，如果是不同的价位则重新加一行
function readd(name,price){
var scr = document.getElementById("goodslist");
var trs = scr.getElementsByTagName("tr");
var op=-1;
for(var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName("td");
var na=tds[1].innerHTML;
var pr=tds[2].innerHTML;
if(name==na&&price==pr){
op=-2;
return i;
}
}
if(op==-1){
return op;
}
}
//在文本框内修改
function txtModify(btn,oldP,oldX){
var inputs = btn.parentNode.getElementsByTagName("input");
var s=Number(inputs[1].value);
var amount = parseInt(inputs[1].value);
var tr = btn.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
if(!isNaN(s)&&s===parseInt(s)){
var price = parseFloat(tds[2].innerHTML);
var m = amount * price;
tds[4].innerHTML = m;
total();
}else{
alert("数值需为整数");
return;
}
if(parseInt(inputs[1].value)<1||parseInt(inputs[1].value)>100){
alert("数量在1-100范围内");
}
}
//通过按钮修改数量
function btnModify(btn,op){
var inputs = btn.parentNode.getElementsByTagName("input");
var amount = parseInt(inputs[1].value);
if(amount==1 && op<0){
btn.parentNode.parentNode.remove();
}
if(amount>=100){
alert("数量在1-100范围内")
}
inputs[1].value = amount+op;
amount = inputs[1].value;
var tr = btn.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var price = parseFloat(tds[2].innerHTML);
var m = amount * price;
tds[4].innerHTML = m;
total();
}
function checkAll(){
var trs=goodslist.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
var inputs=trs[i].getElementsByTagName("input");
if(xuan.checked){
inputs[0].checked=true;
}else{
inputs[0].checked=false;
}
}
}
function delCheck(){
var trs=goodslist.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
var inputs =trs[i].getElementsByTagName("input");
if(inputs[0].checked){
trs[i].remove();
//防止跳删
i=-1;
}else{
continue;
}
}
total();
xuan.checked=false;
}
</script>
<script type="text/html" id="tmp">
<td style="width:150px"><input type="checkbox"></td>
<td style="width:250px">{GNAME}</td>
<td style="width:100px">{GPRICE}</td>
<td style="width:110px">
<input type="button" value="-" onclick="btnModify(this,-1)">
<input type="text" id="txt" value="{GCOUNT}" onblur="txtModify(this)">
<input type="button" value="+" onclick="btnModify(this,1)">
</td>
<td style="width:100px">{GXJ}</td>
<td><input type="button" value="删除" style="width:100px" onclick="del(this)"></td>
</script>
</html>
评论0