js购物车

最新推荐文章于 2024-07-21 17:46:31 发布

Swilder柠

最新推荐文章于 2024-07-21 17:46:31 发布

阅读量1.5k

点赞数 2

文章标签：购物车 js

本文链接：https://blog.csdn.net/smile1_/article/details/82021506

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#spxx a{
   text-decoration:none;
   float:left;}

#spxx img{
   float:left;}
   #dao{
       margin-top:30px;}
       table{
           margin-top:30px;}
</style>

</script>
</head>

<body>
<div align="center">
<img id="dao" src="QQ图片20180824161141.png" width="1250px"/>
</div>
<table width="1250" border="1" id="myTable" align="center">
<tr align="center" bgcolor="#999999">
<td><input id="all" type="checkbox" name="quanxuan" οnclick="alls()" />全选</td>

<td>商品信息</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
<td>操作</td>
</tr>

<tbody id="myTbody">
<tr id="row1">

<td align="center">
<input type="checkbox" name="shop" value="dan1" οnclick="fanxuan()"/></td>

<td id="spxx">
<img src="s1.jpg" width="200px"; width="160px";/>
<a href="#">2018春夏季牛仔背带A字休闲长款连衣裙子女学生毛边时尚女装</a>

</td>
<td width="60px" id="danjia1">125</td>
<td><input type="text" name="money" id="shu1" value="1" οnmοuseοver="jisuan(1)"/><button οnkeyup="jisuan(1)">计算</button></td>

<td id="jin1">125.00</td>

<td><button οnclick="del(1)">删除</button></td>
</tr>



<tr id="row2">
<td align="center">
<input type="checkbox" name="shop" value="dan2" οnclick="fanxuan()"/></td>

<td id="spxx">
<img src="s2.jpg" width="200px"; width="160px";/><a href="#">YSL圣罗兰纯口红方管正红色1正橘色13豆沙色梅子姨妈色裸色正品</a>
</td>

<td width="60px" id="danjia2">320</td>

<td><input type="text" name="money" id="shu2" value="1" οnmοuseοver="jisuan(2)"/><button οnkeyup="jisuan(2)">计算</button></td>

<td id="jin2">320.00</td>

<td><button οnclick="del(2)">删除</button></td>

</tr>
</tbody>
</table><br/>

<div>
<div id="inall" align="center">
已经选择的商品，共<span id="z1">0</span>件
总金额：<span id="z2">0</span>
</div><br/>

</div>
<div align="center">
<input name="b1" type="button" value="增加一行" οnclick="addRow()"/>
<input name="b2" type="button" value="删除一行" οnclick="delRow()" />
</div>
</body>
</html>

// JavaScript Document

//全选
   function alls(){
       var shops=document.getElementsByName("shop");
       var alls=document.getElementById("all");
       if(alls.checked==true){
           if(shops.length!=null){
               for(var i=0;i<shops.length;i++){
                   var sh=shops.item(i);
                       sh.checked=true;
                   }
               }
           }
           else{
               if(shops.length!=null){
                   for(var i=0;i<shops.length;i++){
                   var sh=shops.item(i);
                       sh.checked=false;
                   }
               }
               }
               fanxuan();
       }
          //也是全选，不过是底下三个选中，全选自动选中，反之亦然
           function fanxuan(){
       var shops=document.getElementsByName("shop");
       var alls=document.getElementById("all");
       var s=0;
       var inall=0;
       var no=0;
       for(var i=0;i<shops.length;i++){
           var sh=shops.item(i);
           if(sh.checked==true){
               s++;
               var j=document.getElementById("jin"+s);
               var shh=j.innerHTML;
               inall+=parseInt(shh);
           }
       }
       if(s==shops.length){
           alls.checked=true;
       }else{
           alls.checked=false;
       }
       var zong=document.getElementById("z1");
       zong.innerHTML=s;
       var zong1=document.getElementById("z2");
       zong1.innerHTML=inall;

           }

           function jisuan(num){
               var shus=document.getElementById("shu"+num);
               var shu=shus.value;
               var dans=document.getElementById("danjia"+num);
               var danjia=dans.innerHTML;
               var money=shu*danjia;
               var jins=document.getElementById("jin"+num);
           jins.innerHTML=money;
               fanxuan()
               }

   var t=3;
function addRow(){

   var myTable=document.getElementById("myTable");
var myTbody=document.getElementById("myTbody");
   var fRow;
       if(myTbody.firstChild) //判断是否有第2行
           fRow=myTbody.firstChild.nextSibling;
       //fRow=myTbody.lastChild;
       var newRow=document.createElement("tr")   ; //创建行节点
       newRow.setAttribute("id","row"+t);

       var col1=document.createElement("td");
       col1.setAttribute("align","center"); //创建单元格节点
       col1.innerHTML="<input type='checkbox' name='shop' value='dan"+t+"' οnclick='fanxuan()'/>"//为单元格添加t

       var col2=document.createElement("td");
       col2.setAttribute("id","spxx");
   col2.innerHTML="<img src='s3.jpg' width='200px' width='160px'/><a href='#'>行李箱拉杆</a>";

       var col3=document.createElement("td");
       col3.setAttribute("id","danjia"+t);
       col3.innerHTML="225";

       var col4=document.createElement("td");
       col4.innerHTML="<input type='text' name='money' id='shu"+t+"' value='1' οnmοuseοver='jisuan("+t+")'/><button οnkeyup='jisuan("+t+")'>计算</button>";

       var col5=document.createElement("td");
       col5.setAttribute("id","jin"+t);
       col5.innerHTML="225.00";

       var col6=document.createElement("td");
       col6.innerHTML="<input type='button' value='删除'/>";

       newRow.appendChild(col1);
       newRow.appendChild(col2);
       newRow.appendChild(col3);
       newRow.appendChild(col4);
       newRow.appendChild(col5);
       newRow.appendChild(col6);

       if(fRow)
           fRow.parentNode.insertBefore(newRow,fRow); //把行节点添加到fRow前
       else
           myTbody.appendChild(newRow);

   }


   function delRow(){
   var myTbody=document.getElementById("myTbody");
   var del=myTbody.lastChild;
   if(del)//判断要删除的行是否存在
   myTbody.removeChild(del);//删除行
   else
      alert("不存在！");
   }
   //function updateRow(){
   // var
   //}
function del(d){
   var dels=document.getElementById("row"+d);
   var table=dels.parentNode;//获取tr的父标签,table，用table删除tr。只能是父节点删除子节点，自己不能删除自己
var ds=confirm("你确定要删除吗");
       if(ds==true){
           table.removeChild(dels);
           }

   }