一个简单的购物车程序（html+js）

最新推荐文章于 2024-05-18 20:31:13 发布

舒翰

最新推荐文章于 2024-05-18 20:31:13 发布

阅读量7.1k

点赞数 10

本文链接：https://blog.csdn.net/qq_43128330/article/details/88777523

版权

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>多选购物车</title>
<style>
	.delete{
		border: none;
		color: blue;
		background-color: white;
		width: 60px;
	}	
</style>
<script>
	function selectAll(){//判断是否全选，然后选择是否全选
		var Name = document.getElementsByName("shopName");
		var div1 = document.getElementById("div1");
		var all = document.getElementById("SelectAll").checked;
		var Len = Name.length;//选择框的个数
		var select = 0;//所选择框的个数
		for(var i = 0;i<Len;i++){
			if(Name[i].checked == true){
				select++;
			}
		}
		if(select == Len){
			document.getElementById("SelectAll").checked = true;
		}
		else{
			document.getElementById("SelectAll").checked = false;
		}
	}
	function ifSelectAll(){//是否全选
		var Name = document.getElementsByName("shopName");
		var all = document.getElementById("SelectAll").checked;
		var Len = Name.length;
			if(all == true){
				for(var i = 0;i<Len;i++){
					Name[i].checked=true;
				}
            }else{
                for(var i=0;i<Len;i++){
					Name[i].checked=false;
					document.getElementById("price").innerHTML = "总数量：0";
				}
            }
	}
	function inSelect(){//反选（商品数量未做改变）
		var Name = document.getElementsByName("shopName");
		var all = document.getElementById("SelectAll").checked;
		var Len = Name.length;
		var right = 0;//计算选中或无选中用来后面确定是否消除全选
		var wrong = 0;
		for(var i = 0;i<Len;i++){
			if(Name[i].checked == true){
				Name[i].checked = false;
				right++;
			}
			else{
				Name[i].checked = true;
				wrong++;
			}
		}
		if(all == true&&(right == 3||wrong == 3)){
			document.getElementById("SelectAll").checked = false;
		}
		if(all == false&&(right == 3||wrong == 3)){
			document.getElementById("SelectAll").checked = true;
		}
	}
	function plusNum(name1){//添加商品
		var Name = document.getElementsByName(name1);//获取当前商品的三个input标签的值
		var Num = Name[1].value;
		if(Num>=10){
			alert("买太多了！亲，我们这边没货呦！");
			Num--;
		}
		Num++;
		Name[1].value = Num;
	}
	function lowNum(name1){//减少商品数量
		var Name = document.getElementsByName(name1);
		var Num = Name[1].value;
		if(Num<=1){
			alert("不想买？可以取消的！");
			Num++;
		}
		Num--;
		Name[1].value = Num;
	}
	function allNum(){//计算商品的总数
		var tab = document.getElementById("tab1").getElementsByTagName("tr");//获取table中tr的标签
		var input = document.getElementsByTagName("input");//筛选所有的input标签选择type为text进行数量计算
		var div1 = document.getElementById("price");
		var Name = document.getElementsByName("shopName");
		var trNum = tab.length-1;//最后一行统计不计入计算
		var all = 0;//商品总量
		var k = 0;
		for(var i = 0;i<trNum*5;i++){
			if(input[i].type == "text" && Name[(i-2)/5].checked == true){
				all += parseInt(input[i].value);
				div1.innerHTML = "总数量："+all;
			}
			else{
				k++;
			}
		}
		if(k == trNum*5){
			document.getElementById("price").innerHTML = "总数量：0";
		}
	}
	function allPrice(){//计算商品的总价格（所选）
		var tab = document.getElementById("tab1").getElementsByTagName("tr");
		var allPrice = document.getElementById("allPrice");
		var Name = document.getElementsByName("shopName");
		var trNum = tab.length-1;
		var price = 0;
		for(var i = 0;i<trNum;i++){
			if(Name[i].checked == true){
				price += tab[i].getElementsByTagName("td")[2].getElementsByTagName("input")[1].value*tab[i].getElementsByTagName("td")[3].innerHTML;
				
			}
		}
		allPrice.innerHTML = price;
//			allPrice.innerHTML = tab[0].getElementsByTagName("td")[2].getElementsByTagName("input")[1].value;
//			allPrice.innerHTML = tab[0].getElementsByTagName("td")[3].innerHTML*2;
	}
	function deleteRow(rowId){//根据当前表格的索引号进行商品的删除
		var Index=document.getElementById(rowId).rowIndex; //获取当前行的索引号
		document.getElementById("tab1").deleteRow(Index);
//		document.getElementById("tab1").deleteRow(Index-1);
	}
</script>
</head>

<body>
<table border="1">
	<tr>
		<td width="65px">选择</td>
		<td width="250px">商品名称</td>
		<td width="100px">商品数量</td>
		<td width="60px">价格</td>
		<td width="60px">删了吧</td>
	</tr>
</table>
<table id="tab1" border="1">
		<tr id="shop1">
			<td width="65px"><input type="checkbox" name="shopName" onClick="selectAll();allNum();allPrice();"></td>
			<td width="250px">一个可爱的iPhonex</td>
			<td width="100px"><input type="button" value="-" name="iphone" onClick="lowNum('iphone');allNum();allPrice();"><input type="text" value="1" size="3" name="iphone" onClick="allNum();" onChange="allPrice();"><input type="button" value="+" name="iphone" onClick="plusNum('iphone');allNum();allPrice();"></td>
			<td width="60px">7000</td>
			<td width="60px"><input type="button" value="delete" class="delete" onClick="deleteRow('shop1');allNum();allPrice();"></td>
		</tr>
		<tr id="shop2">
			<td width="65px"><input type="checkbox" name="shopName" onClick="selectAll();allNum();allPrice();"></td>
			<td width="250px">A HuaWei Phone from China</td>
			<td width="100px"><input type="button" value="-" name="Huawei" onClick="lowNum('Huawei');allNum();allPrice();"><input type="text" value="1" size="3" name="Huawei" onClick="allNum();"><input type="button" value="+" name="Huawei" onClick="plusNum('Huawei');allNum();allPrice();"></td>
			<td width="60px">12000</td>
			<td width="60px"><input type="button" value="delete" class="delete" onClick="deleteRow('shop2');allNum();allPrice();"></td>
		</tr>
		<tr id="shop3">
			<td width="65px"><input type="checkbox" name="shopName" onClick="selectAll();allNum();allPrice();"></td>
			<td width="250px">DOM's Book</td>
			<td width="100px"><input type="button" value="-" name="DOM" onClick="lowNum('DOM');allNum();allPrice();"><input type="text" value="1" size="3" name="DOM" onClick="allNum();"><input type="button" value="+" name="DOM" onClick="plusNum('DOM');allNum();allPrice();"></td>
			<td width="60px">20</td>
			<td width="60px"><input type="button" value="delete" class="delete" onClick="deleteRow('shop3');allNum();allPrice();"></td>
		</tr>
	</table>
</body>
</html>

舒翰

关注

10
点赞
踩
40

收藏

觉得还不错? 一键收藏
3
评论
一个简单的购物车程序（html+js）

<!doctype html><html><head><meta charset="UTF-8"><title>多选购物车</title><style> .delete{ border: none; color: blue; background-color: white; width:...
复制链接

扫一扫