HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/script.js" >script> head> <body> <th id="header"><h1>欢迎来到此网站,请尽情购物吧h1>th> <tr id="head"> <th width="100px">商品th> <th width="200px">商品描述th> <th width="200px">单价th> <th width="200px">规格th> <th width="200px">操作th> tr> <tr> <td class="goods">td> <td class="describe">【12期免息】Huawei/华为Mate 30 Pro 5G麒麟990徕卡四摄5G芯片智能手机mate30pro5g官方旗舰店td> <td class="price">7899.00td> <td> <option value="4GB+64GB">4GB+64GBoption> <option value="8GB+64GB">8GB+64GBoption> <option value="4GB+128GB">4GB+128GBoption> <option value="8GB+128GB">8GB+128GBoption> select> td> <td class="total"> 加入购物车 td> tr> <tr> <td class="goods">td> <td class="describe">保时捷Panamera S 威利原厂1:18 帕拉梅拉四门合金仿真汽车模型蓝td> <td class="price">299.00td> <td> <select class="select"> <option value="蓝色 Panamera蓝色">蓝色 Panamera蓝色option> <option value="911 GT-3 白色">911 GT-3 白色option> <option value="黑色 Cayenne黑色">黑色 Cayenne黑色option> select> td> <td class="total"> 加入购物车 td> tr> <tr> <td class="goods">td> <td class="describe">海贼海贼王 超大王拼图1000片木质成年路飞卡通包邮td> <td class="price">49.99td> <td> <option value="海贼王全家福">海贼王全家福option> <option value="两年后9人集结">两年后9人集结option> <option value="少年初长成">少年初长成option> select> td> <td class="total"> 加入购物车 td> tr> <tr> <td class="goods">td> <td class="describe">ThinkPad E490 2UCD/2XCD英特尔酷睿i5 14英寸联想笔记本电脑商务办公轻薄便携官方旗舰店2019款笔记本td> <td class="price">7899.00td> <td> <option value="2XCD:i5/8G/128GB+1TB/2G独显">2XCD:i5/8G/128GB+1TB/2G独显option> <option value="2UCD:i5/8G/ 256GB/ 2G独显">2UCD:i5/8G/ 256GB/ 2G独显option> select> td> <td class="total"> 加入购物车 td> tr> table> <th id="header"><h1>已加入购物车的宝贝h1>th> <thead id="head"> <th width="100px">商品th> <th width="200px">商品描述th> <th width="100px">单价th> <th width="200px">规格th> <th width="100px">数量th> <th width="100px">金额th> <th width="100px">删除th> thead> <tbody id="goods">tbody> <tfoot> <td colspan="5" align="center">总计td> <td id="total">td> <td>元td> tfoot> table> div> body> html> JS代码 //增加购物车列表中的行 function addr(button){ //从商品列表中获取元素 var tr = button.parentNode.parentNode; var td = tr.getElementsByTagName("td"); var goods = td[0].innerHTML; var des = td[1].innerHTML; var price = td[2].innerHTML; var sele = td[3].innerHTML; //使用insertRow()函数增加行 var tbody=document.getElementById("goods"); var row=tbody.insertRow(); //将获取的对应的元素放入新增加的行中 row.innerHTML = "<td>"+goods+"td>"+ "<td>"+des+"td>"+ "<td>"+price+"td>"+ "<td>"+sele+"td>"+ "<td align='center'>"+ "<input type='button' value=' - ' id='jian' onclick=jian(this)>"+ "<input id='text' type='text' size='1' value='1' />"+ "<input type='button' value=' + ' id='add' onclick=add(this)>"+"td>"+ "<td>"+price+"td>"+ "<td align='center'>"+ "<input type='button' value='删除' class='add1' onclick=dele(this)>"+ "td>" //计算总价函数 total(); } //删除函数 function dele(dele){ dele.parentNode.parentNode.remove(); total(); } //数量减少函数 function jian(jian){ //获取jian父节点的所有input标签 var inputs = jian.parentNode.getElementsByTagName("input"); //取出放在第二列的数量 amount = inputs[1].value; //转换为整型 var amount1 = parseInt(amount); //最小数量为1 if(amount1 == 1){ return; } inputs[1].value=amount1-1; //根据数量的变化,计算出当前数量对应的金额 var tr = jian.parentNode.parentNode; var tds = tr.getElementsByTagName("td"); var price = parseFloat(tds[2].innerHTML); var sum = price*amount1; tds[5].innerHTML=sum-price; total(); } function add(add){ var inputs = add.parentNode.getElementsByTagName("input"); amount = inputs[1].value; var amount1 = parseInt(amount); inputs[1].value=amount1+1; var tr = add.parentNode.parentNode; var tds = tr.getElementsByTagName("td"); var price = parseFloat(tds[2].innerHTML); var sum = price*amount1; tds[5].innerHTML=sum+price; total(); } //计算总价函数 function total() { var tbody = document.getElementById("goods"); //取出tbody中所有tr标签 var trs = tbody.getElementsByTagName("tr"); var sum = 0; //遍历trs数组,并计算每一个tr标签中金额的总和 for(var i = 0; i < trs.length; i++) { var tds = trs[i].getElementsByTagName("td"); var m = tds[5].innerHTML; sum += parseFloat(m); } var total = document.getElementById("total"); total.innerHTML = sum; } function prepareGallery() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("shopping")) return false; var gallery = document.getElementById("shopping"); var links = gallery.getElementsByTagName("button"); for ( var i=0; i < links.length; i++) { links[i].onclick = function() { return addr(this); } } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(prepareGallery); CSS样式表 * { margin: 0px; padding: 0px; } body{ text-align: center; } table, td, td { border: 1px solid #000000; font-size: 10px; } table { display: block; } img { float: left; } tr { text-align: center; } #box { width: 900px; height: 1500px; border: 1px solid white; margin-top: 20px; margin-left: 300px; } #shopping { float: left; text-align: center; border-collapse: collapse; } #head { height: 20px; background: #F0FFFF; } #header{ color: gold; letter-spacing: 0; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 } } .add{ height: 30px; text-align: center; width: 100px; border-radius: 5px; cursor: pointer; } .add:hover{ -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .add1{ height: 30px; text-align: center; width: 50px; border-radius: 5px; cursor: pointer; } .add1:hover{ -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .select{ cursor: pointer; } .photos{ height: 100px; width: 100px; } .describe{ padding: 5px; text-align: left; } .goods { padding: 5px; text-align: left; } .total { color: #ff0000; font-weight: 700; } 运行后的样式如下图