购物车问题

最新推荐文章于 2024-07-19 20:21:23 发布

报_报告大王

最新推荐文章于 2024-07-19 20:21:23 发布

阅读量1.3w

点赞数

本文链接：https://blog.csdn.net/tokyeo/article/details/77900549

版权

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

html:

问题:实现增加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"; }