HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息
1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组
2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行
3、请注意同步更新统计信息，价格保留小数点后两位
4、列表和统计信息格式请与HTML示例保持一致
5、不要直接手动修改HTML中的代码
6、不要使用第三方库
[编程题]购物车
<!-- HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息
1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组
2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行
3、请注意同步更新统计信息，价格保留小数点后两位
4、列表和统计信息格式请与HTML示例保持一致
5、不要直接手动修改HTML中的代码
6、不要使用第三方库 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 填写样式 */
body,
html {
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead {
background: #3d444c;
color: #ffffff;
}
td,
th {
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<!-- 填写标签 -->
<table id="jsTrolley">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>10.00</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>产品2</td>
<td>30.20</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>产品3</td>
<td>20.50</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总计</th>
<td colspan="2">60.70(3件商品)</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
// 填写JavaScript
let tableArr = []
function add(items) {
// console.log(document.querySelectorAll('tbody tr'));
// 添加节点
if (items) {
for (let i = 0; i < items.length; i++) {
const tr = document.createElement('tr')
tr.innerHTML = `<td>${items[i].name}</td>
<td>${items[i].price.toFixed(2)}</td>
<td "><a href="javascript:void(0);">删除</a></td>`
document.querySelector('tbody').appendChild(tr)
}
}
// 给新元素也添加还是删除功能
Array.from((document.querySelectorAll('tbody a'))).forEach(item => {
item.onclick = bind()
});
sum()
}
function bind() {
return function (e) {
// const deleteArr = Array.from(document.querySelectorAll('tbody tr td:nth-child(3) a'))
console.log(e.target);
e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
sum()
}
}
function sum() {
// 重渲染总计
let priceArr = Array.from(document.querySelectorAll('tbody tr td:nth-child(2)'))
let sum = 0
let num = 0
priceArr.forEach(item => {
sum += (+item.innerHTML)
})
num = priceArr.length
document.querySelector('tfoot td').innerHTML = `${sum.toFixed(2)}(${num}件商品)`
}
Array.from((document.querySelectorAll('tbody a'))).forEach(item => {
item.addEventListener('click', bind)
});
</script>
</body>
</html>
测试通过了
发表于 2023-08-16 10:13:32
回复(0)
本地是能跑的
function add(items) {
let tbody = document.querySelector("tbody");let lis = [];
let sum = 0;
let existingTrs = [];
tbody.querySelectorAll("tr").forEach(item => {
existingTrs.push(`<tr>${item.innerHTML}</tr>`)
})
items.forEach(item => {
sum = (sum*1000+item.price*1000)/1000;
let li = `<tr><td>${item.name}</td><td>${item.price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td></tr>`
lis.push(li);
})
let totalEle = document.querySelector("tfoot>tr>td");
let total = (((totalEle.innerText.split("(")[0])*1000)+sum*1000)/1000;
totalEle.innerText=total.toFixed(2) + "(" + (existingTrs.length + items.length) + "件商品)";
tbody.innerHTML = existingTrs.concat(lis).join("");
bind();
}
function bind() {
let tbody = document.querySelector("tbody");
let as = document.querySelectorAll("a")
as.forEach(item => {
item.onclick=function(e){
if(e.target.innerText === "删除"){
let tr = e.target.parentElement.parentElement;
let tds = tr.children;
let price = tds[1].innerText;
let alltrs = tbody.children;
let totalEle = document.querySelector("tfoot>tr>td");
let total = ((((totalEle.innerText.split("(")[0]))*1000)-price*1000)/1000;
tbody.removeChild(tr);
totalEle.innerText = total.toFixed(2) + "(" + alltrs.length + "件商品)";
}
}
})
}
发表于 2023-06-12 18:01:06
回复(0)
最后一道难题，且做且珍惜
function add(items) {
let tbody = document.querySelector('tbody');
for (let i = 0; i < items.length; i++) {
let tr = document.createElement('tr');
let td = document.createElement('td');
td.innerHTML = items[i].name;
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML = items[i].price.toFixed(2);
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML = '<a href="javascript:void(0);">删除</a>'
tr.appendChild(td);
tbody.appendChild(tr);
}
let total = 0;
let count = 0;
Array.from(tbody.children).forEach((child) => {
total += (child.children[1].innerText - 0);
count++;
})
//更新总计价格和数量
let tfoot = document.querySelector('tfoot');
tfoot.children[0].children[1].innerHTML = `${total.toFixed(2)}(${count}件商品)`;
}
function bind() {
//事件绑定在其父亲上，最后会通过冒泡触发
let tbody = document.querySelector('tbody');
tbody.onclick = function (e) {
if (e.target.nodeName === 'A') {
e.target.parentNode.parentNode.remove();
}
//进行视图更新
let total = 0;
let count = 0;
Array.from(tbody.children).forEach((child) => {
total += (child.children[1].innerText - 0);
count++;
})
//更新总计价格和数量
let tfoot = document.querySelector('tfoot');
tfoot.children[0].children[1].innerHTML = `${total.toFixed(2)}(${count}件商品)`;
}
}
发表于 2023-05-20 16:28:21
回复(0)
function add(items) {
const { name, price } = items
const tr = document.createElement('tr')
tr.innerHTML = `<td>${name}</td>\n<td>${price}</td>\n<td><a href="javascript:void(0);">删除</a></td>`
const tbody = document.querySelector('tbody')
// 添加产品
tbody.appendChild(tr)
function getCount(){
// 获取产品列表
const itemsNum = Array.from(tbody.querySelectorAll('tr'))
// 获取金额总数
const priceSum = itemsNum.reduce((pre, current)=>{
const price = Number(current.children[1].innerText)
return pre += price
}, 0)
// 新增产品后修改总计信息
const sumCell = document.querySelector('tfoot').querySelectorAll('td')
sumCell[0].innerText = `${priceSum}(${itemsNum.length}件商品)`
}
Array.from(tbody.children).forEach(item=>{
item.onclick = function (e) {
bind(e, getCount)
}
})
getCount()
}
function bind(e, fn) {
const tbody = document.querySelector('tbody')
tbody.removeChild(e.target.parentNode.parentNode)
fn()
}
const { name, price } = items
const tr = document.createElement('tr')
tr.innerHTML = `<td>${name}</td>\n<td>${price}</td>\n<td><a href="javascript:void(0);">删除</a></td>`
const tbody = document.querySelector('tbody')
// 添加产品
tbody.appendChild(tr)
function getCount(){
// 获取产品列表
const itemsNum = Array.from(tbody.querySelectorAll('tr'))
// 获取金额总数
const priceSum = itemsNum.reduce((pre, current)=>{
const price = Number(current.children[1].innerText)
return pre += price
}, 0)
// 新增产品后修改总计信息
const sumCell = document.querySelector('tfoot').querySelectorAll('td')
sumCell[0].innerText = `${priceSum}(${itemsNum.length}件商品)`
}
Array.from(tbody.children).forEach(item=>{
item.onclick = function (e) {
bind(e, getCount)
}
})
getCount()
}
function bind(e, fn) {
const tbody = document.querySelector('tbody')
tbody.removeChild(e.target.parentNode.parentNode)
fn()
}
发表于 2023-05-12 17:03:45
回复(0)
这不通过，有什么大病？
var tbody = document.querySelector('tbody');
var del = document.querySelectorAll('a');
var colspan = document.querySelector('tfoot').querySelector('td');
function add(items) {
let str = `<td>${items.name}</td><td>${items.price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td>`;
let tr = document.createElement('tr');
tr.innerHTML = str;
tbody.appendChild(tr);
total();
}
function bind() {
for (let i = 0; i < del.length; i++) {
tbody.onclick = function (e) {
if (e.target.tagName === 'A') {
tbody.removeChild(e.target.parentElement.parentElement);
total();
}
}
}
}
bind();
function total() {
let trs = document.querySelectorAll('tbody tr');
let prices = [];
for (const tr of trs) {
let td = tr.children[1];
let price = parseFloat(td.innerText);
prices.push(price);
}
let total = prices.reduce((a, b) => a + b, 0);
colspan.innerHTML = `${total.toFixed(2)}(${prices.length}件商品)`
}
发表于 2022-10-14 16:28:14
回复(0)
function add(items) {
const tBody = document.getElementByTagName('tbody')[0];
const sumTd = document.querySelector('tfoot td');
let fragment = document.createDocumentFragment();
let totalPrice = parseFloat(sumTd.innerHTML);
items.forEach(curr => {
let price = Number(Number(curr?.price).toFixed(2));
totalPrice += price;
let vDom = document.createElement('tr');
vDom.innerHTML = `<td>${curr?.name}</td><td>${price}</td><td><a href="javascript:void(0);">删除</a></td>`
fragment.append(vDom);
})
tBody.append(fragment);
console.log(typeof totalPrice)
sumTd.innerHTML = `${totalPrice.toFixed(2)}(${tBody.children.length}件商品)`;
}
function bind() {
const tBody = document.querySelector('tbody');
tBody.addEventListener('click', function(e){
if(e.target.tagName.toLowerCase() === 'a') {
let tarTr = e.target.parentNode.parentNode;
let price = tarTr.querySelector(':nth-of-type(2)').innerText;
tarTr.remove(); // 删除了dom, 已经获取不到了
let sumNum = this.children.length;
let totalprice = (parseFloat(sumTd.innerHTML) - price).toFixed(2);
sumTd.innerText = `${totalprice}(${sumNum}件商品)`;
}
}, false);
}
本地是可以运行的，预计问题是查询dom用了querySelector , 题目中想让使用dom.getElementByTagName 获得类数组。
考察：
1. 保留两位小数： num.toFixed(2); 返回两位小数的字符串
2. 创建节点： document.createElement(tagName);
3. 删除节点：dom.removeChild(childNode); dom.remove();
***委派：通过e.target确定目标对象
发表于 2022-09-24 21:52:16
回复(0)
<script>
const tbody = document.querySelector('tbody')
const tfoot = document.querySelector('tfoot')
var items = [{ name: '1', price: 1.11 }, { name: '1', price: 1.11 }, { name: '1', price: 1.11 }, { name: '1', price: 1.11 },]
function add() {
tbody.innerHTML = ''
tbody.innerHTML = items.map((item, index) => {
return `
<tr>
<td>${item.name}</td>
<td>${item.price.toFixed(2)}</td>
<td><a href='javascript:void(0);' data=id=${index}>删除</a></td>
</tr>
`
}).join('')
const total = items.reduce((prev, item) => prev + item.price, 0).toFixed(2)
tfoot.innerHTML = `<tr>
<th>总计</th>
<td colspan="2">${total}(${tbody.children.length}件商品)</td>
</tr>`
}
add(items)
function bind() {
tbody.addEventListener('click', e => {
if (e.target.tagName === 'A') {
items.splice(e.target.dataset.id, 1)
add(items)
}
})
}
bind(items)
</script>
发表于 2022-09-23 21:32:11
回复(0)
function add(items) {
var tbody = document.querySelector("tbody");
var str = "";
items.forEach((item) => {
str += `<tr>
<td>${item.name}</td>
<td>${item.price}</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>`;
});
tbody.innerHTML += str;
count();
}
function bind() {
var tbody = document.querySelector("tbody");
var trs = Array.from(document.querySelectorAll("tbody tr"));
trs.forEach((item) => {
item.onclick = function (e) {
if (e.target.innerHTML == "删除") {
item.remove();
count();
}
};
});
}
function count() {
var tfoot_td = document.querySelector("tfoot td");
var sum = 0,
num = 0;
var tds = Array.from(
document.querySelectorAll("tbody tr td:nth-child(2)")
);
tds.forEach((item) => {
sum += item.innerHTML * 1;
});
sum = sum.toFixed(2);
num = tds.length;
tfoot_td.innerHTML = `${sum}(${num}件商品)`;
}
发表于 2022-08-19 16:20:25
回复(0)
function add(items) {
let tbodyEl = document.querySelector("tbody");
items.forEach((item) => {
console.log(item);
tbodyEl.innerHTML += `<tr><td>${
item.name
}</td><td>${item.price.toFixed(
2
)}</td><td><a href="javascript:void(0);">删除</a></td></tr>`;
});
// 动态计算总值与价值
computeSum();
}
function bind() {
document.querySelector("tbody").addEventListener("click", function (e) {
// 事件委托
if (e.target.tagName !== "A") return;
// 删除节点
this.removeChild(e.target.parentNode.parentNode);
// 动态计算总值与价格
computeSum();
});
}
// 动态计算总值与价格函数
function computeSum() {
let trList = document.querySelectorAll("tr td:nth-of-type(2)"),
sumEl = document.querySelector("tfoot td"),
sum = 0;
sum = Array.from(trList).reduce(function (pre, curr) {
return pre + Number(curr.innerText);
}, sum);
sumEl.innerText = `${sum.toFixed(2)}(${trList.length}件商品)`;
}
发表于 2022-07-12 11:04:21
回复(0)
function add(items) {
var tbody = document.querySelector('tbody')
for (var i = 0; i < items.length; i++) {
var tr = document.createElement('tr')
tr.innerHTML =
`<td>${items[i].name}</td><td>${items[i].price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td>`
tbody.appendChild(tr)
}
Sum()
}
function bind() {
var tbody = document.querySelector('tbody')
var a = document.querySelectorAll('a')
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
tbody.removeChild(this.parentNode.parentNode)
Sum()
}
}
}
function Sum() {
var tbody = document.querySelector('tbody')
var tfoot = document.querySelector('tfoot').querySelector('td')
var sum = 0
var num = 0
console.log(tbody.children.length);
for (var i = 0; i < tbody.children.length; i++) {
sum += parseFloat(tbody.children[i].children[1].innerText)
num++
}
tfoot.innerText = sum + '(' + num + '件商品)'
}
发表于 2022-05-26 11:30:31
回复(1)
let sum = {row:0, sum: 0};
function add(items) {
let list = [];
for(var i=0,il=items.length;i<il;i++){
let price = parseFloat(items[i].price)
sum.row += 1;
sum.sum += price;
list.push(`<tr><td>${items[i].name}</td><td>${(price).toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td></tr>`)
}
document.querySelector('#jsTrolley tbody').innerHTML += list.join('')
document.querySelector('#jsTrolley td[colspan="2"]').innerHTML = `${sum.sum.toFixed(2)}(${sum.row}件商品)`
}
function updateTable(val){
sum.row -= 1;
sum.sum -= +val
document.querySelector('#jsTrolley td[colspan="2"]').innerHTML = `${sum.sum.toFixed(2)}(${sum.row}件商品)`
}
function deleteTr(tar){
if(tar.tagName.toUpperCase() != 'A'){
return;
}
let tr = tar.parentNode.parentNode;
tr.parentNode.removeChild(tr);
updateTable(+tr.children[1].textContent);
}
function bind() {
document.querySelector('#jsTrolley tbody').addEventListener('click', evt=>{
deleteTr(evt.target)
})
}
bind();
发表于 2022-05-21 23:54:44
回复(0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="jsTrolley">
<button id="add">add</button>
<thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
<tbody>
<tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
</tbody>
<tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>
</body>
</html>
<!--
1.js dom节点相关操作
2.js 事件委托机制
-->
<script>
const box = document.getElementsByTagName('tbody')[0]
const total = document.getElementsByTagName('tfoot')[0].getElementsByTagName('td')[0]
const addBtn = document.getElementById('add')
// add
addBtn.onclick = function () {
add([{name:'xx', price: 10.11}])
}
// add init
function add(items) {
var str= document.createElement('tr')
if(items.length>0) {
items.forEach((res, index)=>{
str.innerHTML+=`<tr><td>${res.name}${index+4}</td><td>${res.price}</td><td><a href="javascript:void(0);">删除</a></td></tr>`
})
}
box.appendChild(str)
getTotal()
}
// get price and total
function getTotal () {
var trs = box.getElementsByTagName('tr')
var priceAll = 0
for(let i=0; i<trs.length; i++) {
const tds = trs[i].getElementsByTagName('td')
for(let j=0; j<tds.length; j++) {
let prices = tds[j].innerHTML
if(prices*1>0) {
priceAll= addPsrecision(prices*1, priceAll)
}
}
}
total.innerHTML = `${priceAll}(${trs.length}件商品)`
}
// addEventListener
bind(box, 'click', function (event) {
let target=event.target
event.preventDefault()
if(event.target.nodeName === 'A'){
box.removeChild(target.parentNode.parentNode)
getTotal()
}
})
function bind(el, type, fn) {
el.addEventListener(type, fn)
}
// 小数计算精度
function addPsrecision(num1, num2) {
const num1Digits = (num1.toString().split('.')[1] || '').length;
const num2Digits = (num2.toString().split('.')[1] || '').length;
const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(2);
}
</script>
<style>
body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="jsTrolley">
<button id="add">add</button>
<thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
<tbody>
<tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
</tbody>
<tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>
</body>
</html>
<!--
1.js dom节点相关操作
2.js 事件委托机制
-->
<script>
const box = document.getElementsByTagName('tbody')[0]
const total = document.getElementsByTagName('tfoot')[0].getElementsByTagName('td')[0]
const addBtn = document.getElementById('add')
// add
addBtn.onclick = function () {
add([{name:'xx', price: 10.11}])
}
// add init
function add(items) {
var str= document.createElement('tr')
if(items.length>0) {
items.forEach((res, index)=>{
str.innerHTML+=`<tr><td>${res.name}${index+4}</td><td>${res.price}</td><td><a href="javascript:void(0);">删除</a></td></tr>`
})
}
box.appendChild(str)
getTotal()
}
// get price and total
function getTotal () {
var trs = box.getElementsByTagName('tr')
var priceAll = 0
for(let i=0; i<trs.length; i++) {
const tds = trs[i].getElementsByTagName('td')
for(let j=0; j<tds.length; j++) {
let prices = tds[j].innerHTML
if(prices*1>0) {
priceAll= addPsrecision(prices*1, priceAll)
}
}
}
total.innerHTML = `${priceAll}(${trs.length}件商品)`
}
// addEventListener
bind(box, 'click', function (event) {
let target=event.target
event.preventDefault()
if(event.target.nodeName === 'A'){
box.removeChild(target.parentNode.parentNode)
getTotal()
}
})
function bind(el, type, fn) {
el.addEventListener(type, fn)
}
// 小数计算精度
function addPsrecision(num1, num2) {
const num1Digits = (num1.toString().split('.')[1] || '').length;
const num2Digits = (num2.toString().split('.')[1] || '').length;
const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(2);
}
</script>
<style>
body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
编辑于 2022-05-20 15:26:20
回复(0)
function add(items) {
var newTr=document.createElement('tr')
var text='';
text+='<td>'+items.name+'</td>'
text+='<td>'+items.price+'</td>'
text+='<td><a href="javascript:void(0);">删除</a></td>'
newTr.innerHTML=text
document.getElementsByTagName('tbody')[0].appendChild(newTr)
var foot=document.getElementsByTagName('tfoot')[0]
var total=foot.lastChild.lastChild.innerText
var count=Number(total.split('(')[1].match(/^\d+/))+1
var totalPrice=(Number(total.match(/\d+.\d+/g))+items.price).toFixed(2)
foot.lastChild.lastChild.innerText=totalPrice+'('+count+'件商品)'
}
function bind() {
var all=document.getElementsByTagName('tbody')[0]
all.onclick=function(e){
if(e.target.tagName==='A'){
var child=e.target.parentNode.parentNode
var money=child.children[1].innerText
all.removeChild(child)
var foot=document.getElementsByTagName('tfoot')[0]
var total=foot.lastChild.lastChild.innerText
var count=Number(total.split('(')[1].match(/^\d+/))-1
var totalPrice=Number(total.match(/\d+.\d+/g))-money
totalPrice=totalPrice==0?0:totalPrice.toFixed(2)
foot.lastChild.lastChild.innerText=
totalPrice+'('+count+'件商品)'
}
}
}
add({name:'tangwei',price:120})
add({name:'tangwei',price:120})
bind()
发表于 2022-03-07 22:19:37
回复(0)
本地可以这里不行？
function add(items) {
var tbody = document.querySelector('tbody');
var tfoot = document.querySelector('tfoot');
var total = parseFloat(tfoot.querySelector('td').innerHTML.split('(')[0]);
items.forEach(el=>{
console.log(total);
total += parseFloat(el.price.toFixed(2));
tbody.innerHTML +='<tr><td>'+el.name+'</td><td>'+el.price.toFixed(2)+'</td><td><a href="javascript:void(0);">删除</a></td></tr>';
})
tfoot.querySelector('td').innerHTML = total.toFixed(2) + '('+tbody.querySelectorAll('tr').length+'件商品)'
bind();
}
function bind() {
var tbody = document.querySelector('tbody');
var tfoot = document.querySelector('tfoot');
var total = parseFloat(tfoot.querySelector('td').innerHTML.split('(')[0]);
var a = document.querySelectorAll('a');
a.forEach(el=>{
el.onclick=function(){
total -= parseFloat(el.parentElement.parentElement.children[1].innerHTML);
tfoot.querySelector('td').innerHTML = total.toFixed(2) + '('+(tbody.querySelectorAll('tr').length-1)+'件商品)';
tbody.removeChild(el.parentElement.parentElement);
}
})
}
bind();
发表于 2022-02-16 15:11:48
回复(0)
//到底是为啥过不了我也不懂，但是Chrome测试没有问题。。
let tbd = document.getElementsByTagName('tbody')[0]
let tbdtrs = tbd.children
//console.log(tbdtrs);
function cal() {
let tft = document.getElementsByTagName('tfoot')[0]
let tfttr = tft.children[0]
let total = tfttr.lastElementChild
let len = tbdtrs.length
let priceArr = []
let sum = 0
console.log(tbdtrs);
for (let i = 0; i < len; i++) {
let price = tbdtrs[i].children[1].innerHTML
priceArr.push(Number(price))
}
//console.log(priceArr);
let tempPrice
if (priceArr.length !== 0) {
tempPrice = priceArr.reduce(accAdd).toString()
} else {
tempPrice = '0.00'
}
let exp = /^([0-9]+[\d]*(.[0-9]{1,2})?)$/
exp.test(tempPrice) ? tempPrice : tempPrice += '0'
//let pricetd = tbdtr.children[1]
//console.log(tempPrice);
total.innerHTML = tempPrice + "(" + len + "件商品)"
//console.log(total)
}
function add(items) {
//console.log(tbd)
let newtr = document.createElement('tr')
tbd.appendChild(newtr)
for (let keys in items) {
let td = document.createElement('td')
td.innerHTML = items[keys]
newtr.appendChild(td)
}
let del = document.createElement('td')
del.innerHTML = '<a href="javascript:void(0);">删除</a>'
newtr.appendChild(del)
cal()
}
let product3 = {
name: '产品4',
price: 23.33
}
add(product3)
for (let i = 0; i < tbdtrs.length; i++) {
//获取删除按钮
let del = tbdtrs[i].children[2].children[0]
//del.onclick = bind()
console.log(del);
del.addEventListener('click', bind)
}
function bind() {
console.log(this.parentElement.parentElement);
let deltr = this.parentElement.parentElement
tbd.removeChild(deltr)
cal()
//this.parent
}
//小数精确加法
function accAdd(arg1, arg2) {
var r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
}
发表于 2022-01-27 03:33:19
回复(0)
就是过不了
function update() {
let table = document.getElementById('jsTrolley')
let tbody = table.getElementsByTagName('tbody')[0]
let tfoot = table.getElementsByTagName('tfoot')[0]
let sum = 0
let count = 0
let elements = tbody.getElementsByTagName("tr")
for (const node of elements) {
sum += parseFloat(node.children[1].innerText)
count++
}
tfoot.getElementsByTagName('td')[0].innerHTML = `${(sum / count).toFixed(2)}(${count}件商品)`
}
function add(items) {
let table = document.getElementById('jsTrolley')
let tbody = table.getElementsByTagName('tbody')[0]
let tfoot = table.getElementsByTagName('tfoot')[0]
for (const item of items) {
tbody.innerHTML += `<tr><td>${item.name}</td><td>${item.price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td></tr>`
}
update()
}
function bind() {
let table = document.getElementById('jsTrolley')
let tbody = table.getElementsByTagName('tbody')[0]
let tfoot = table.getElementsByTagName('tfoot')[0]
tbody.onclick = (evt) => {
if (evt.target.nodeName != 'A') {
return
}
evt.target.parentElement.parentElement.remove()
update()
}
}
bind()
发表于 2022-01-18 17:09:42
回复(0)
问题信息
通过挑战的用户
查看代码-
2023-06-26 13:15:43
-
2023-06-26 11:32:59 -
2023-06-25 21:19:49
-
2023-06-21 16:08:20 -
2023-06-20 13:10:02
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K2座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
