JD12. 购物车
描述
HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息HTML/CSS/JavaScript 解法, 执行用时: 957ms, 内存消耗: 77848KB, 提交时间: 2021-06-24
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":"function add(items) {\n\n var tbody = document.getElementsByTagName('tbody')[0]\n var tfoot = document.getElementsByTagName('tfoot')[0].children[0].children[1]\n var num = tbody.children.length\n var total = parseFloat(tfoot.innerText.match(/\\d+.\\d+/)[0])\n\n var tr = \"\"\n for (let i in items){\n total = parseFloat((total+items[i].price).toFixed(2))\n tr += `<tr><td>${items[i].name}</td><td>${items[i].price.toFixed(2)}\n </td><td><a href=\"javascript:void(0);\">删除</a>\n </td></tr>`\n num++\n }\n var tf = `${total.toFixed(2)}(${num}件商品)`\n tfoot.innerText = tf\n tbody.innerHTML = tbody.innerHTML+tr \n}\n\nfunction bind() {\n var tbody = document.getElementsByTagName('tbody')[0]\n var tfoot = document.getElementsByTagName('tfoot')[0].children[0].children[1]\n tbody.addEventListener('click',(event)=>{\n var num = tbody.children.length\n if(event.target.tagName == 'A'){\n var price = event.target.parentElement.parentElement.innerText.match(/^.*\\t(\\d*\\.?\\d*)\\t.*$/)[1]\n var total = parseFloat(tfoot.innerText.match(/\\d+.\\d+/)[0])\n total = parseFloat((total-price).toFixed(2))\n var tf = `${total.toFixed(2)}(${num-1}件商品)`\n tfoot.innerText = tf\n event.target.parentElement.parentElement.remove()\n }\n })\n}","html":"<table id=\"jsTrolley\">\n <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>\n <tbody>\n <tr><td>产品1</td><td>10.00</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品2</td><td>30.20</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品3</td><td>20.50</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n </tbody>\n <tfoot><tr><th>总计</th><td colspan=\"2\">60.70(3件商品)</td></tr></tfoot>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 970ms, 内存消耗: 77876KB, 提交时间: 2021-06-20
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":" function add(items) {\n let tbody = document.getElementsByTagName('tbody')[0];\n for(var i=0;i<items.length;i++){\n var tr=document.createElement('tr');\n tr.innerHTML= '<td>' + items[i].name + '</td><td>'\n + items[i].price.toFixed(2) +\n '</td><td><a href=\"javascript:void(0);\">删除</a></td>';\n tbody.appendChild(tr)\n }\n changePrice();\n }\nfunction bind() {\n var tbody=document.getElementsByTagName('tbody')[0];\n tbody.onclick=function(event){\n var target=event.target||event.srcElement;\n if(target.innerHTML==\"删除\"){\n target.parentNode.parentNode.remove();\n changePrice();\n }\n }\n}\nfunction changePrice(){\n var tbody = document.getElementsByTagName('tbody')[0];\n var trList = tbody.children;\n var total = 0;\n for(var j=0;j<trList.length;j++){\n total += parseFloat(trList[j].children[1].innerHTML);\n \n }\n document.getElementsByTagName('tfoot')[0].childNodes[0].children[1].innerHTML = total.toFixed(2)+\"(\"+trList.length+'件商品)';\n }\n\n","html":"<table id=\"jsTrolley\">\n <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>\n <tbody>\n <tr><td>产品1</td><td>10.00</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品2</td><td>30.20</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品3</td><td>20.50</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n </tbody>\n <tfoot><tr><th>总计</th><td colspan=\"2\">60.70(3件商品)</td></tr></tfoot>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 976ms, 内存消耗: 77812KB, 提交时间: 2021-07-11
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":"function show(total, count) {\n document.getElementsByTagName(\"tfoot\")[0].children[0].children[1].innerHTML = `${total.toFixed(2)}(${count}件商品)`;\n }\nfunction calc() {\n const trs = document.getElementsByTagName(\"tbody\")[0].getElementsByTagName(\"tr\");\n let total = 0,\n count = 0;\n Array.prototype.forEach.call( trs, (tr) => \n (total += parseFloat(tr.children[1].textContent)))\n show(total, trs.length);\n }\nfunction add(items) {\n const tbodyDom = document.getElementsByTagName(\"tbody\")[0];\n let html = tbodyDom.innerHTML;\n items.forEach((i) => {\n html += `\n <tr>\n <td>\n ${i.name}</td>\n <td>\n ${i.price.toFixed(2)}\n </td>\n <td>\n <a href=\"javascript:void(0);\">删除</a>\n </td>\n </tr>\n `;\n });\n tbodyDom.innerHTML = html;\n calc();\n }\nfunction bind() {\n const tbodyDom = document.getElementsByTagName(\"tbody\")[0];\n tbodyDom.addEventListener(\"click\", (evt) => {\n const target = evt.target;\n if (target.nodeName === \"A\") {\n target.parentElement.parentElement.remove();\n calc();\n }\n });\n }\n","html":"<table id=\"jsTrolley\">\n <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>\n <tbody>\n <tr><td>产品1</td><td>10.00</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品2</td><td>30.20</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品3</td><td>20.50</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n </tbody>\n <tfoot><tr><th>总计</th><td colspan=\"2\">60.70(3件商品)</td></tr></tfoot>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 986ms, 内存消耗: 77904KB, 提交时间: 2021-06-29
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":"function add(items) {\n //items [{name, price}]\n //1.获取父节点\n var tbody = document.getElementsByTagName(\"tbody\")[0]\n var tfoot = document\n .getElementsByTagName(\"tfoot\")[0]\n .getElementsByTagName(\"td\")[0]\n //2.获取初始数据\n var num = tbody.children.length\n var total = parseFloat(tfoot.innerText.match(/\\d+.\\d+/)[0])\n // var total = tfoot.innerText.match(/^.*\\t(\\d*\\.?\\d*)\\(.*\\)$/)[1]\n //3.创建子节点\n //产品行\n var tr = \"\"\n for (let i in items) {\n total = parseFloat((total + items[i].price).toFixed(2))\n tr += `<tr><td>\n ${items[i].name}</td>\n <td> ${items[i].price.toFixed(2)}</td>\n <td><a href=\"javascript:void(0);\">删除</a></td></tr>\n `\n num++\n }\n //总计行\n var tf = `${total.toFixed(2)}(${num}件商品)`\n //4.将新增的添加进去\n tfoot.innerHTML = tf\n tbody.innerHTML = tbody.innerHTML + tr\n }\n\n function bind() {\n //1.获取父节点\n var tbody = document.getElementsByTagName(\"tbody\")[0]\n var tfoot = document\n .getElementsByTagName(\"tfoot\")[0]\n .getElementsByTagName(\"td\")[0]\n //2.添加点击事件\n tbody.addEventListener(\"click\", (event) => {\n var num = tbody.children.length\n if (event.target.tagName == \"A\") {\n //获取数据\n var price = event.target.parentElement.parentElement.innerText.match(\n /^.*\\t(\\d*\\.?\\d*)\\t.*$/\n )[1]\n var total = parseFloat(tfoot.innerText.match(/\\d+.\\d+/)[0])\n //修改数据\n total = parseFloat((total - price).toFixed(2))\n var tf = `${total.toFixed(2)}(${num - 1}件商品)`\n tfoot.innerHTML = tf\n //删除节点\n event.target.parentElement.parentElement.remove()\n }\n })\n }","html":"<table id=\"jsTrolley\">\n <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>\n <tbody>\n <tr><td>产品1</td><td>10.00</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品2</td><td>30.20</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品3</td><td>20.50</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n </tbody>\n <tfoot><tr><th>总计</th><td colspan=\"2\">60.70(3件商品)</td></tr></tfoot>\n</table>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 987ms, 内存消耗: 78524KB, 提交时间: 2021-07-10
{"css":"body,html{\n padding: 0;\n margin: 0;\n font-size: 14px;\n color: #000000;\n}\ntable{\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\nthead{\n background: #3d444c;\n color: #ffffff;\n}\ntd,th{\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}","js":"/*function add(items) {\n \n}\n\nfunction bind() {\n \n}*/\n\nfunction add(items) {\n if (!items) return;\n const tbody = document.querySelector(\"#jsTrolley>tbody\")\n let sum_price = 0\n // 添加行\n items.forEach(({name, price}) => {\n var str =\n `<tr><td>${name}</td><td>${price.toFixed(2)}</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>`\n tbody.insertAdjacentHTML('beforeEnd', str)\n sum_price += Number(price)\n })\n // 更新总计\n upTfoot(sum_price, items.length)\n}\n\nfunction bind() {\n const tbody = document.querySelector(\"#jsTrolley>tbody\")\n tbody.addEventListener('click', function (e) {\n if (e.target.nodeName === 'A') {\n var tr = e.target.parentNode.parentNode\n var price = removeTr(tr)\n upTfoot(-price, -1)\n }\n })\n}\n\nfunction upTfoot(price, number) {\n const tfoot_td = document.querySelector(\"#jsTrolley>tfoot td\")\n let [sum, num] = tfoot_td.innerText.match(/[\\d\\.]+/g)\n tfoot_td.innerText = `${(Number(sum) + price ).toFixed(2)}(${Number(num) + number}件商品)`\n}\n\nfunction removeTr(tr) {\n var price = tr.querySelectorAll(\"td\")[1].innerText\n tr.remove()\n return Number(price)\n}","html":"<table id=\"jsTrolley\">\n <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>\n <tbody>\n <tr><td>产品1</td><td>10.00</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品2</td><td>30.20</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n <tr><td>产品3</td><td>20.50</td><td><a href=\"javascript:void(0);\">删除</a></td></tr>\n </tbody>\n <tfoot><tr><th>总计</th><td colspan=\"2\">60.70(3件商品)</td></tr></tfoot>\n</table>","libs":[]}