JS小案例之购物车

来源：互联网发布：网络黄金编辑：程序博客网时间：2024/05/01 06:02

JS小案例之购物车

gwc1.js

function add_shoppingcart(ele){//获取当前行的商品信息var eleTr = ele.parentNode.parentNode;var eles = eleTr.getElementsByTagName("td");var name = eles[0].innerText;var price = eles[1].innerText;//alert(name+price);var flag = find(name);if(!flag){//添加到购物车中var tbody = document.getElementById("goods");var tr = document.createElement("tr");tr.innerHTML = "<td>"+name+"</td> "+"<td>"+price+"</td> "+"<td align='center'> "+       "<input type='button' value='-' onclick=\"remove_one(this)\" /> "+       "<input type='text' size='3' readonly value='1'/> "+       "<input type='button' value='+' onclick=\"add_one(this)\" /> "+       "</td> "+       "<td>"+price+"</td> "+       "<td align='center'><input type='button' value='x' onclick=\"delete1(this)\"/></td>";    tbody.appendChild(tr);}total_price();}function find(str){var tbody = document.getElementById("goods");var trs = tbody.getElementsByTagName("tr");//console.log(str+"length:"+trs.length);for(var i=0;i<trs.length;i++){var td_name = trs[i].childNodes[0];var name = td_name.innerText;//console.log(name);if(str==name){add(trs[i]);return true;}}return false;}function add(tr) {var tds = tr.getElementsByTagName("td");var td_price = tds[1];var price = parseInt(td_price.innerText);var td_count = tds[2];var input = td_count.getElementsByTagName("input")[1];var num = parseInt(input.value);var td_value = tds[3];var value = parseInt(td_value.innerText);num ++;value += price;input.value = num;td_value.innerText = value;total_price();}function delete1(ele){var eleTr = ele.parentNode.parentNode;eleTr.parentNode.removeChild(eleTr);total_price();}function remove_one(ele) {var tr = ele.parentNode.parentNode;var tds = tr.getElementsByTagName("td");var td_price = tds[1];var price = parseInt(td_price.innerText);var td_count = tds[2];var input = td_count.getElementsByTagName("input")[1];var num = parseInt(input.value);var td_value = tds[3];var value = parseInt(td_value.innerText);//alert(price+num+value);if(num>1){num--;value-=price;input.value = num;td_value.innerText = value;}total_price();}function add_one(ele) {var tr = ele.parentNode.parentNode;var tds = tr.getElementsByTagName("td");var td_price = tds[1];var price = parseInt(td_price.innerText);var td_count = tds[2];var input = td_count.getElementsByTagName("input")[1];var num = parseInt(input.value);var td_value = tds[3];var value = parseInt(td_value.innerText);num ++;value += price;input.value = num;td_value.innerText = value;total_price();}function total_price(){var total = document.getElementById("total");var tbody = document.getElementById("goods");var trs = tbody.getElementsByTagName("tr");//alert(111);var sum = 0;for(var i=0;i<trs.length;i++){var td_price = trs[i].getElementsByTagName("td")[3];//console.log(td_price);var price = parseInt(td_price.innerText);//console.log(price);//console.log(trs.length);sum += price;}//console.log(sum);total.innerHTML = sum;}

gwc1.html

<!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 src="gwc1.js" type="text/javascript"></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="-" onclick="remove_one(this);"/>            <input type="text" size="3" readonly value="1"/>            <input type="button" value="+" onclick="add_one(this);"/>          </td>          <td>80</td>          <td align="center"><input type="button" value="x" onclick="delete1(this);"/></td>        </tr>      -->      </tbody>      <tfoot>        <tr>          <td colspan="3" align="right">总计</td>          <td id="total"></td>          <td></td>        </tr>      </tfoot>    </table>      </body></html>

0 0