js 购物车(原生)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#table1 th{
				border: 0.5px solid;
				width: 100px;
			}
			#table1 td{
				border: 0.5px solid;
				text-align: center;
				width:120px;
			}

		</style>
	</head>
	<body>
		商品名称：<input type="text" id="t1" class="ipt"/><span class="sp"></span>   <br />
		单&emsp;&emsp;价：<input type="text" id="t2" class="ipt"/><span class="spp1"></span>      <br />
		数&emsp;&emsp;量：<input type="text" id="t3"/ class="ipt"><span class="spp2"></span> 	  <br /> <br />
	    <input type="button" value="添加" onclick="add()" class="ys">
	    <input type="button" value="删除" class="sc">
	    <br/>
	         省份：<select  id="sheng"></select>
	         市区：<select  id="shi"></select><br />
	     <input type="text" name="" id="ssk1" value="" /> <button id="ssk2">搜索</button>
	    <hr />
	    <table cellspacing="0" cellpadding="5" id="table1">
	    	<tr>
	    		<th>序列号</th>
	    		<th><input type="checkbox" class="quanxuan" />全选</th>
	    		<th>时间</th>
	    		<th>商品名称/姓名</th>
	    		<th>单价 班级</th>
	    		<th>数量 成绩</th>
	    		<th>省份</th>
	    		<th>市区</th>
	    		
	    		<th>操作</th>
	    	</tr>
	    </table>
	    
	    <p class="price">总计  :</p>
	</body>
	<script>
	
		//获取th
		var ths = document.getElementsByTagName("th");
		//获取input
		var ipt = document.getElementsByClassName("ipt");
		//获取tbody
		var tb = document.getElementsByTagName("tbody")[0];
		var sp=document.getElementsByClassName("sp")[0];
		var spp1=document.getElementsByClassName("spp1")[0];
		var spp2=document.getElementsByClassName("spp2")[0];
		function add(){	
			//创建存放td的数组
				var tds=[];
			//根据th的数量，来循环创建td	
			for(var i = 0; i < ths.length; i++){
			 	tds[i] = document.createElement("td");
			}				

			//根据input的值，给前两个td赋值
			for(var j = 0; j < 2; j++){
				tds[j+3].innerHTML = ipt[j].value;
				}

			//给小计设置一个class名，方便之后的总计获取它
			tds[tds.length-2].className = "xj";
			//tds[3]添加一类名
			tds[3].className="sskclass";
			
			//数量
			var sp1 = document.createElement("span");
			sp1.innerHTML = ipt[2].value;
					
			//创建+号 
			var add_xiao = document.createElement("button");
			add_xiao.innerHTML = "+";
			add_xiao.onclick = function(){
				var a = parseInt(sp1.innerHTML);
				sp1.innerHTML = ++a;
		
				zj();
			}	
		
			//减号
			var sub_xiao = document.createElement("button");
			sub_xiao.innerHTML = "-";
			
			sub_xiao.onclick = function(){
				var a = parseInt(sp1.innerHTML);
				
				if(a>0){
					sp1.innerHTML = --a;
				}
			}
			tds[5].appendChild(sp1);

			//创建存放td的 tr
			var tr = document.createElement("tr");
			tr.className = "tr_new";
			for(var k = 0; k < tds.length; k++){
				tr.appendChild(tds[k]);
				
			}
		
			//创建单行删除按钮；
			var but = document.createElement("button");
			but.innerHTML = "删除";
	
			//给按钮添加删除整行的功能
			but.onclick = function(){
				this.parentNode.parentNode.remove();
			xh();
			}
			//将删除按钮 添加到最后一个td
			tr.lastElementChild.appendChild(but);
			
			//创建 全选设置
			var quanxuan=document.getElementsByClassName("quanxuan")[0];
			
			var ip=document.createElement("input");
			ip.type="checkbox"; 
			//ip添加到tds里
			tds[1].appendChild(ip);
			//给ip创建一个class标签  名
			ip.className="fxk";
			
			//获取fxk
			
		    var fxk1=document.getElementsByClassName("fxk");
		    //设置
			tr1=document.getElementsByTagName("tr");

			//给全选设置整列的全选功能
					//点击事件
					quanxuan.onclick=function(){
						
						for(var i=0; i<fxk1.length; i++){
							
							if (quanxuan.checked) {
							//方法一
//							console.log(tr1[i]);
//							tr1[i].firstElementChild.firstElementChild.checked=true;  此方法要把循环改为 i<tr1.length
							//方法二
							
							fxk1[i].checked = true;
			
							}else{
								//方法一
//							tr1[i].firstElementChild.firstElementChild.checked=false;
							//方法二
							fxk1[i].checked = false;
						
						
							}
						}	
					}

			//总的删除按钮  获取删除按钮
			var sc=document.getElementsByClassName("sc")[0];
				sc.onclick=function(){
					for (var i=0; i<fxk1.length; i++) {
						if (fxk1[i].checked==true) {
							
							fxk1[i].parentElement.parentElement.remove();
							--i;
							
						}
					}
					
				//调用序列号
				xh();				
				}
			//将tr添加到页面已有的tbody中		
			tb.appendChild(tr);
			
			//调用序列号
			xh();			
						
			//设置颜色  设置隔行换色的颜色
		    var xj = document.getElementsByClassName("xj");
			
			if ((xj.length%2)==0) {
				tr.style.backgroundColor="aquamarine";
			} else{
				tr.style.backgroundColor="cyan";
			}
			
			//添加设置时间
					var date=new Date();
					var datea1=date.getFullYear();//获取年份
					var datea2=date.getMonth();   //获取月份
					var datea3=date.getDate();	  //获取天份
					var datea4=date.getHours();   //获取小时
					var datea5=date.getMinutes(); //获取分钟
					var datea6=date.getSeconds(); //获取秒份

					tds[2].innerText=datea1+"年"+datea2+"月"+datea3+"日"+datea4+"时"
					+datea5+"分"+datea6+"秒";
//					console.log(tds[2].innerText);
		

		//添加省	
	
		sheng=document.getElementById("sheng");
		tds[6].innerHTML=sheng.value;
		
		//添加市

		shi=document.getElementById("shi");
		tds[7].innerHTML=shi.value;
		
		}//添加点击框	
		
		var shengfen=["河南","北京","山东","河北"];
		var shifen=[
					["漯河","南阳","郑州","安阳"],
					["朝阳","延庆","大兴","昌平"],
					["济南","青岛","日照","新东方"],
					["石家庄","涿州","保定","雄安"]	
				];		
		
		//获取省的select元素
		var sel=document.getElementsByTagName("select")[0];
		//将省的数组元素添加到sel
			for(var i=0; i<shengfen.length; i++){
				var opt=document.createElement("option");
				opt.innerHTML=shengfen[i];
				sel.appendChild(opt);
				
			}
		//获取市的select元素	
		var selshi=document.getElementsByTagName("select")[1];			
			sel.onchange=function(){
				change();
			}
			change();
			
			function change(){
								//储存当前数组下标
				var selIndex=sel.selectedIndex
				console.log
				selshi.innerHTML="";
				
				for (var j=0; j<shifen[selIndex].length; j++) {
					var opt=document.createElement("option");
					opt.innerHTML=shifen[selIndex][j];
					selshi.appendChild(opt);
				}
			}
		//搜索框部分
			
			var ssk2=document.getElementById("ssk2");	
			
			//按姓名搜索
			ssk2.onclick=function(){			
				var ssk1=document.getElementById("ssk1").value;
				//根据th的数量，来循环创建td
				var tdss = document.createElement("td");
			
//				tr2=document.getElementsByTagName("tr");

					var sskclass=document.getElementsByClassName("sskclass");
				
					for (i=0; i<sskclass.length; i++){		
						if (sskclass[i].innerText == ssk1){
							console.log(sskclass[i].innerText);
							sskclass[i].parentElement.style.display=null;
						}else{
							sskclass[i].parentElement.style.display=none;
						}
					}				
			}

		
		//总计    单独封装
		function zj(){
			var xj = document.getElementsByClassName("xj");
			var sum = 0;
			
			for(var i = 0; i < xj.length; i++){
				sum += parseInt(xj[i].innerHTML);
			}
			
			var zj = document.getElementsByClassName("price")[0];
			
			zj.innerHTML = "总计 : " + sum;
		}
		
		//序号  单独封装
		
		function xh(){
			
//			var tr1=document.getElementsByTagName("tr");

			for (var i=1; i<tr1.length; i++) {

			tr1[i].firstElementChild.innerHTML=i;
		
			}
			
		}
	</script>
</html>
Jason–json
发布了96 篇原创文章 · 获赞 26 · 访问量 7309
私信关注
猜你喜欢
