购物车初级代码

最新推荐文章于 2024-06-18 17:19:20 发布

乔你那熊色

最新推荐文章于 2024-06-18 17:19:20 发布

阅读量4.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_41160264/article/details/81143688

版权

这是一个非常非常非常初级的购物车代码。其中的总计，批量购买按钮没有实现，并且删除按钮会出现bug。

下面是代码：

<html>
	<head>
		<title>JS初识（3）</title>
		<script>
		
			function buy_produced(produced_name_id,produced_price_id){
				//获得商品的复选框状态
				var choose_result=document.getElementById(produced_name_id+'_choose');
				//先获得商品的名称和价格
				if(choose_result.checked){
				
				var produced_name =document.getElementById(produced_name_id);
				var produced_price=document.getElementById(produced_price_id);
				var produced_name_text=produced_name.innerText;
				var produced_price_text=produced_price.innerText;
				//得到描述购物车的表并的得到其中的HTML元素
				var table_name=document.getElementById('shopping_car');
				var table_str=table_name.innerHTML;
				//商品数量
				var produced_count=1;
				//拼接列表，用节点的方式
				var get_result=table_str.toString().search(produced_name_text);
				if(get_result == -1){
					//说明表中没有该商品
					//创建tr和td和text内容
					var new_tr=document.createElement('tr');
					var new_td=document.createElement('td');
					var new_td_text=document.createTextNode(produced_name_text);
					new_td.setAttribute('id',produced_name_id);
					var new_td2=document.createElement('td');
					var new_td_text2=document.createTextNode(produced_price_text);
					new_td2.setAttribute('id',produced_price_id);
					var new_td3=document.createElement('td');
					var new_td_text3=document.createTextNode(produced_count);
					new_td3.setAttribute('id',produced_name_id+'_count');
					new_td3.setAttribute('align','center');
					var new_td4=document.createElement('td');
					var new_td_text4=document.createTextNode('故障');
					new_td4.setAttribute('id',produced_name_id+'_zongji');
					var new_td5=document.createElement('td');
	//				var new_td_text5=document.createHTMLNode('<input type="button" value="删除">');
					new_td5.innerHTML="<input type='button' value='删除' onclick=delete_producted(produced_name_id)/>";
					new_td5.setAttribute('id',produced_name_id+'_delete');
					new_td5.setAttribute('align','center');
					//将tr，td和table进行拼接
					new_td.appendChild(new_td_text);
					new_td2.appendChild(new_td_text2);
					new_td3.appendChild(new_td_text3);
					new_td4.appendChild(new_td_text4);
	//				new_td5.appendChild(new_td_text5);
					new_tr.appendChild(new_td);
					new_tr.appendChild(new_td2);
					new_tr.appendChild(new_td3);
					new_tr.appendChild(new_td4);
					new_tr.appendChild(new_td5);
					table_name.appendChild(new_tr);
					//不要用这种传统的字符串拼接形式。   var table_str=table_name.innerHTML;
				}
			
			
					else{
					//说明购物车中有商品，只需要替换 产品数量的列即可
					//得到要被替换的列节点
					var old_node=document.getElementById(produced_name_id+'_count');
					var old_node_number=parseInt(old_node.innerText);
					old_node_number += 1;
					//创建新的列节点
					var new_td4=document.createElement('td');
					var new_td_text4=document.createTextNode(old_node_number.toString());
					new_td4.setAttribute('id',produced_name_id+'_count');
					new_td4.setAttribute('align','center');
					new_td4.appendChild(new_td_text4);
					//新节点替换旧节点
					old_node.parentNode.replaceChild(new_td4,old_node);
					
					}
				}
				else{
					alert('请选择商品');
				}
			}
			
			function reduce(produced_name_id){
				//判断复选框的状态
				var choose_result=document.getElementById(produced_name_id+'_choose');
				if(choose_result.checked){
				//判断是否有这个商品
				//先获得商品的名称和价格
				var table_name=document.getElementById('shopping_car');//得到表引用
				var table_str=table_name.innerHTML;
				var produced_exit=table_str.toString().search(produced_name_id);
				if(-1==produced_exit){
					alert('商品不存在');
				}
				//判断该商品在购物车中是否存在
				else {
					//说明没有该商品
					var produced_count =document.getElementById(produced_name_id+'_count');
					var produced_count_text=produced_count.innerText;
					var result=parseInt(produced_count_text);
					if(0==result){
					alert('商品的数量已经为0');
					}
					else{
				
					//说明有该商品，数量要减少一 produced_name_id+'_count'
					//得到原来的单元格
					var old_Node = document.getElementById(produced_name_id+'_count');
					var old_Node_text=parseInt(old_Node.innerText);
					//创建新的单元格
					var new_Node=document.createElement('td');
					var new_Node_text=document.createTextNode(old_Node_text-1);
					new_Node.setAttribute('id',produced_name_id+'_count');
					new_Node.setAttribute('align','center');
					new_Node.appendChild(new_Node_text);
					//替换单元格
					old_Node.parentNode.replaceChild(new_Node,old_Node);
				}	
					
			}
		}	
					else{
						alert('请选择商品');
					}
	}
			function delete_producted(produced_name_id){
				var msg='删除这条数据';
				if(confirm(msg)==true){
				var shopping_car=document.getElementById('shopping_car');//得到表引用
				//获取商品所在的tr元素
				var producted_row=document.getElementById(produced_name_id+'_row');
				shopping_car.delete(producted_row);
				}
				else{
					return;
				}
			}
			
			function choose_all(){
				//先得到全选框的标签
				var result=document.getElementById('choose_all');
				//判断复选框的状态
				if(result.checked){
					//当复选框被勾选的时候，判断复选框的状态为true
					//得到其他复选框的引用
					var other_produced_list = document.getElementsByClassName('produced');
					for(var produced in other_produced_list){
						other_produced_list[produced].checked=true;
					}
				}
				else{
					var other_produced_list = document.getElementsByClassName('produced');
					for(var produced in other_produced_list){
						other_produced_list[produced].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<center>
		<!--创建商品表-->
		<table style="border:1px solid #9999FF;background:#33FFFF">
			<caption><b>商品表</b></caption>
			<tr>
				<th>
					全选<input  id ="choose_all" type="checkbox" onclick="choose_all()"/>
				</th>
				<th>商品名</th>
				<th>价格(单价)</th>
				<th>调节数量</th>
				<th>操作</th>
			</tr>
			<tr id="yingyangkuangxian_row">
				<td>
					<input id="yingyangkuangxian_choose" class="produced" type="checkbox"/>
				</td>
				<td id="yingyangkuangxian">
					营养快线
				</td>
				<td id="yingyangkuangxianPrice">
					3元
				</td>
				<td>
				<input type="button" value="-" onclick="reduce('yingyangkuangxian')"/>
					1
				<input type="button" value="+" onclick="buy_produced('yingyangkuangxian','yingyangkuangxianPrice')"/>
				</td>
				<td>
					<input type="button" value="购买" onclick="buy_produced('yingyangkuangxian','yingyangkuangxianPrice')"/>
				</td>
			</tr>
			<tr id="anmuxi_row">
				<td>
					<input id="anmuxi_choose" class="produced" type="checkbox"/>
				</td>
				<td id="anmuxi">
					安慕希
				</td>
				<td id="anmuxiPrice">
					8元
				</td>
				<td>
				<input type="button" value="-" onclick="reduce('anmuxi')"/>
					1
				<input type="button" value="+" onclick="buy_produced('anmuxi','anmuxiPrice')"/>
				</td>
				<td>
					<input type="button" value="购买" onclick="buy_produced('anmuxi','anmuxiPrice')"/>
				</td>
				
			</tr>
			<tr id="meinianda_row">
				<td>
					<input  id="meinianda_choose" class="produced" type="checkbox"/>
				</td>
				<td id="meinianda">
					美年达
				</td>
				<td id="meiniandaPrice">
					3元
				</td>
				<td>
				<input type="button" value="-" onclick="reduce('meinianda')"/>
					1
				<input type="button" value="+" onclick="buy_produced('meinianda','meiniandaPrice')"/>
				</td>
				<td>
					<input type="button" value="购买" onclick="buy_produced('meinianda','meiniandaPrice')"/>
				</td>
			</tr>
			<tr>
				<td colspan="4">
					<input type="button" value="批量购买"/>
				</td>
			</tr>
		</table>
		<br/><br/><br/><br/>
		<table id="shopping_car" style="border:1px solid #9999FF;background:#33FFFF;align:center">
			<caption><b>购物车</b></caption>
			<tr>
				<th>商品名</th>
				<th>价格</th>
				<th>数量</th>
				<th>总计</th>
				<th>操作</th>
			</tr>
		</table>
		</center>
	</body>
</html>

页面显示为：

乔你那熊色

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
购物车初级代码

这是一个非常非常非常初级的购物车代码。其中的总计，批量购买按钮没有实现，并且删除按钮会出现bug。下面是代码：&lt;html&gt; &lt;head&gt; &lt;title&gt;JS初识（3）&lt;/title&gt; &lt;script&gt; function buy_produced(produced_name_...
复制链接

扫一扫