简易购物车

来源：互联网发布：汽车网站模板源码编辑：程序博客网时间：2024/05/29 16:40
<!DOCTYPE html><html>  <head>    <title>购物车</title>    <meta charset="utf-8" />    <style type="text/css">      h1 {        text-align:center;      }      table {        margin:0 auto;        width:60%;        border:2px solid #aaa;        border-collapse:collapse;      }      table th, table td {        border:2px solid #aaa;        padding:5px;      }      th {        background-color:#eee;      }    </style>    <script>    //加入购物车    //调用该函数时传入了this(正在点的按钮)，    //需要声明参数来接收这个值(按钮对象)，    //参数名不能是关键字(this)。    function add_shoppingcart(btn) {    //1.获取按钮的爷爷(tr)    var tr = btn.parentNode.parentNode;    //2.获取它爷爷所有的孩子(td)    var tds = tr.children;    //3.获取td0的内容(商品名)    var name = tds[0].innerHTML;    //4.获取td1的内容(单价)    var price = tds[1].innerHTML;    //5.创建新行tr    var ntr = document.createElement("tr");    ntr.innerHTML =           '<td>'+name+'</td>'+          '<td>'+price+'</td>'+          '<td align="center">'+            '<input type="button" value="-" onclick="decrease(this);"/> '+            '<input type="text" size="3" readonly value="1" align="center"/> '+            '<input type="button" value="+" onclick="increase(this);"/>'+          '</td>'+          '<td>'+price+'</td>'+          '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>';         //6.将此行追加到购物车(tbody)下         var tbody =           document.getElementById("goods");         tbody.appendChild(ntr);         sum();    }    //删除    function del(btn) {    btn.parentNode.parentNode.remove();    sum();    }    //加法    function increase(btn) {    //1.获取按钮的哥哥(文本框)    var text =     btn.previousElementSibling;    //2.获取数量    var amount = text.value;    //3.+1，再写入框内    text.value = ++amount;    //4.获取按钮的父亲的哥哥(td1)    var td1 =     btn.parentNode.previousElementSibling;    //5.获取td1的内容(单价)    var price = td1.innerHTML;    //6.计算金额    var mny = price*amount;    //7.获取按钮的父亲的弟弟(td3)    var td3 = btn.parentNode.nextElementSibling;    //8.将金额写入td3    td3.innerHTML = mny;    sum();    }    //减法    function decrease(btn) {    //1.获取按钮的弟弟(文本框)    var text = btn.nextElementSibling;    //2.获取数量    var amount = text.value;    if(amount==1) {    return;    }    //3.-1，再写入框内    text.value = --amount;    //4.获取按钮的父亲的哥哥(td1)    var td1 =     btn.parentNode.previousElementSibling;    //5.获取td1的内容(单价)    var price = td1.innerHTML;    //6.计算金额    var mny = price*amount;    //7.获取按钮的父亲的弟弟(td3)    var td3 = btn.parentNode.nextElementSibling;    //8.将金额写入td3    td3.innerHTML = mny;    sum();    }    //求合计    function sum() {    //1.获取tbody下所有的行    var tbody =     document.getElementById("goods");    var trs = tbody.children;    //2.遍历这些行    var sum = 0;    for(var i=0;i<trs.length;i++) {    //3.获取本行第4个孩子td3    var td3 = trs[i].children[3];    //4.获取td3的内容(金额)    var mny = parseFloat(td3.innerHTML);    //5.累加    sum += mny;    }    //6.将金额写入合计列    var total =     document.getElementById("total");    total.innerHTML = sum;    }    </script>  </head>  <body>    <h1>真划算</h1>    <table>      <tr>        <th>商品</th>        <th>单价(元)</th>        <th>颜色</th>        <th>库存</th>        <th>好评率</th>        <th>操作</th>      </tr>         <tr>        <td>罗技M185鼠标</td>        <td>80</td>        <td>黑色</td>        <td>893</td>        <td>98%</td>        <td align="center">          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>        </td>      </tr>      <tr>        <td>微软X470键盘</td>        <td>150</td>        <td>黑色</td>        <td>9028</td>        <td>96%</td>        <td align="center">          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>        </td>      </tr>      <tr>        <td>洛克iphone6手机壳</td>        <td>60</td>        <td>透明</td>        <td>672</td>        <td>99%</td>        <td align="center">          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>        </td>      </tr>      <tr>        <td>蓝牙耳机</td>        <td>100</td>        <td>蓝色</td>        <td>8937</td>        <td>95%</td>        <td align="center">          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>        </td>      </tr>      <tr>        <td>金士顿U盘</td>        <td>70</td>        <td>红色</td>        <td>482</td>        <td>100%</td>        <td align="center">          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>        </td>      </tr>    </table>      <h1>购物车</h1>    <table>      <thead>        <tr>          <th>商品</th>          <th>单价(元)</th>          <th>数量</th>          <th>金额(元)</th>          <th>删除</th>        </tr>      </thead>      <tbody id="goods">        <!--         <tr>          <td>罗技M185鼠标</td>          <td>80</td>          <td align="center">            <input type="button" value="-"/>            <input type="text" size="3" readonly value="1"/>            <input type="button" value="+"/>          </td>          <td>80</td>          <td align="center"><input type="button" value="x"/></td>        </tr>        -->      </tbody>      <tfoot>        <tr>          <td colspan="3" align="right">总计</td>          <td id="total"></td>          <td></td>        </tr>      </tfoot>    </table>      </body></html>
0 0