购物车问题

题目考点是使用原生的js实现在表格中动态添加列,并且统计每列的结果;还有一个考点就是使用事件代理删除点击的该行.

html:

<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=" ">删除</ 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>

问题:实现增加add(items)和删除bind()方法.牛客网上的答案没有看懂,结合着答案自己修改了一下,不过估计在运行时间上不满足条件,贴下代码:

牛客上的答案:

作者:牛妹
链接:https://www.nowcoder.com/discuss/38889
来源:牛客网
 

function add(items) {

    var tbody = document.getElementById('jsTrolley').getElementsByTagName('tbody')[0];

    (items || []).forEach(function (item) {

        var tr = document.createElement('tr');

        tr.innerHTML = '<td>' + item.name

 

 + '</td><td>' + item.price.toFixed(2) + '</td><td><a href="javascript:void(0);">删除</a></td>';

        tbody.appendChild(tr);

    });

    update();

}

 

function bind() {

    var table = document.getElementById('jsTrolley');

    table.addEventListener('click', function (event) {

        var el = event.target;

        if (el.tagName.toLowerCase() === 'a') {

            tr = el.parentNode.parentNode;

            tr.parentNode.removeChild(tr);

            update();

        }

    });

}

 

function update() {

    var table = document.getElementById('jsTrolley');

    var tbody = table.getElementsByTagName('tbody')[0];

    var tfoot = table.getElementsByTagName('tfoot')[0];

    var tr = [].slice.call(tbody.getElementsByTagName('tr'), 0);

    var total = 0;

    tr.forEach(function (tr) {

        total += +(tr.getElementsByTagName('td')[1].innerHTML.trim());

    });

    tfoot.getElementsByTagName('td')[0].innerHTML = total.toFixed(2) + '(' + tr.length + '件商品)';

 

 

我自己的代码,因为对(items || []).forEach(function (item) {})暂时不明白,就换成for循环;做删除操作的时候只记得之前看过的事件代理,但是忘记了,不知道要添加一个事件监听器.

var items = '[{"name":"产品4","price":10.00},{"name":"产品4","price":10.00},{"name":"产品4","price":10.00}]';
items = eval('('+items+')');
function add(items){
	    var tbody = document.getElementById('jsTrolley').getElementsByTagName('tbody')[0];	
	    for(var i in items){	    	
	    	var tr = document.createElement('tr');
	    	var html = '<td>'+items[i].name+ '</td><td>' + items[i].price + '</td><td><a href="javascript:void(0);">删除</a></td>';
	    	console.log(html);
	    	tr.innerHTML = html;
	    	tbody.appendChild(tr);
	    }
	    update();
}

function bind() {
	    var table = document.getElementById('jsTrolley');
	    table.addEventListener('click', function (event) {
	        var el = event.target;
	        if (el.tagName.toLowerCase() === 'a') {
	            tr = el.parentNode.parentNode;
	            tr.parentNode.removeChild(tr);
	            update();
	        }
	    });
	}
	 
	function update() {
	    var table = document.getElementById('jsTrolley');
	    var tbody = table.getElementsByTagName('tbody')[0];
	
	    var productnum = tbody.rows.length;
	    
	  //  alert(productnum)
	    var count = 0;
		for(var i=0;i<productnum;i++){
			count +=  (tbody.rows[i].cells[1].innerHTML.trim())*1 ;
		}    
	      count = count.toFixed(2);
		var tfoot = table.getElementsByTagName('tfoot')[0];
		tfoot.getElementsByTagName('td')[0].innerHTML = count + '(' +productnum + '件商品)'
		}
总结一下,还是对操作table不熟悉,放上几个方法吧:
<img data-cke-saved-src="https://img-blog.csdnimg.cn/2022010711074590451.png" src="https://img-blog.csdnimg.cn/2022010711074590451.png" alt="" />

 
function displayResult(){ var table=document.getElementById("myTable"); var row=table.insertRow(0); //在第0行的前面插入 var cell1=row.insertCell(0); var cell2=row.insertCell(1); cell1.innerHTML="New"; cell2.innerHTML="New"; }

 


 

 

 

 

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

报_报告大王

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值