<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js"></script>
</head>
<body>
<div class="container-wrapper">
<table cellpadding="0" cellspacing="0" class="table">
<tr class="header">
<td width="100"><input type="checkbox" name="allSelect">全选</td>
<td width="400">商品</td>
<td width="180">单价</td>
<td width="140">数量</td>
<td width="210">小计</td>
<td width="133">操作</td>
</tr>
<tr class="content">
<td><input type="checkbox" name="checkbox" checked="checked"></td>
<td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="125" height="100"><span>Casio/卡西欧 EX-TR350</span>
</td>
<td>6000</td>
<td class="td"><span class="reduce">-</span><input class="count" type="text" name="text" value="1"><span class="add">+</span></td>
<td >6000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr class="content">
<td><input type="checkbox" name="checkbox" checked="checked"></td>
<td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="125" height="100"><span>Casio/卡西欧 EX-TR350</span>
</td>
<td>6000</td>
<td class="td"><span class="reduce">-</span><input class="count" type="text" name="text" value="1"><span class="add">+</span></td>
<td >6000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</table>
<div>
<a id="addRow">增加一行</a>
<span>总计￥:</span><span class="total">0</span>
</div>
</div>
</body>
</html>js部分
window.onload = function(){
var table = document.getElementsByTagName('table')[0];
var reduces= document.getElementsByClassName("reduce");
var adds=document.getElementsByClassName("add");
var total=document.getElementsByClassName("total")[0];
var addRow=document.getElementById('addRow');
//var rows= table.children[0].children;
var rows = table.rows;
console.log(rows);
var totalprices=0;
//减按钮的功能
for (var i=0;i<reduces.length;i++) {
reduces[i].addEventListener("click",function(){
var value=this.nextSibling.value;
// alert(value);
if(value<=1){
return false;
};
value--;
this.nextSibling.value=value;
//小计功能的调用
calculate(this,value);
totalprices-=6000;
total.innerHTML=totalprices;
},false);
};
//加按钮的功能
for(var j=0;j<adds.length;j++){
adds[j].addEventListener("click",function(){
var value=this.previousSibling.value;
value++;
this.previousSibling.value=value;
//小计功能的调用
calculate(this,value);
totalprices+=6000;
total.innerHTML=totalprices;
},false);
};
//小计的功能封装成函数
function calculate(that,value){
// var price = this.parentNode.nextSibling.previousElementSibling.previousElementSibling.innerHTML;
var price = that.parentNode.parentNode.cells[2].innerHTML;
var totalPrice =that.parentNode.parentNode.cells[4].innerHTML;
totalPrice =price*value;
// console.log(totalPrices);
that.parentNode.parentNode.cells[4].innerHTML=totalPrice;
//console.log(rows);
};
//增加行功能
addRow.addEventListener("click",function(){
var tr=document.createElement("tr");
tr.setAttribute('class','content');
tr.innerHTML='<td><input type="checkbox" name="checkbox" checked="checked"></td>'+
'<td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="125" height="100"><span>Casio/卡西欧 EX-TR350</span></td>'+
'<td>6000</td>'+'<td class="td"><span class="reduce">-</span><input class="count" type="text" name="text" value="1"><span class="add">+</span></td>'+
'<td >6000</td>'+
'<td><a href="javascript:;">删除</a></td>';
//table.firstChild.appendChild(tr);
table.children[0].appendChild(tr);
//console.log(rows);
//或者使用cloneNode();
// var tr = rows[1];
// var cloneNode =tr.cloneNode(true);
// table.appendChild(cloneNode);
// rows.length+=1;
// table.insertRow(rows.length-1);
},false);
//删除行功能
for( var z=1;z<rows.length;z++){
//console.log(rows[z].cells[5].children[0]);
rows[z].cells[5].children[0].addEventListener("click",function(){
this.parentNode.parentNode.style.display='none';
//或者使用className;
//this.parentNode.parentNode.className='hidden';
//或者使用setAttribute()
//this.parentNode.parentNode.setAttribute("style","display:none");
//console.log(this.parentNode.parentNode);
},false);
};
// function totalPrices (){
// for (var a=1;a<rows.length;a++){
// totalprices+=parseInt(rows[a].cells[4].innerHTML);
// }
// total.innerHTML=totalprices;
// }
// totalPrices();
};
// var total=document.getElementsByClassName("total")[0];
// var totalprices=0;
// total.nodeValue=totalprices;
// for (var a=1;a<rows.length;a++){
// totalprices+=parseInt(rows[a].cells[4].nodeValue);
// };
// total.nodeValue=totalprices;css部分
*{
padding: 0;
margin:0;
text-decoration: none;
}
.container-wrapper{
width:1175px;
height:600px;
margin: 50px auto;
}
table{
border: 1px solid rgb(226, 220, 255);
}
table td{
border: 1px solid rgb(226, 220, 255);
text-align: center;
}
input{
display: inline-block;
margin-right: 5px;
}
.header{
height: 40px;
background-color: rgb(226, 242, 255);
color: #666;
}
.content span{
display: inline-block;
vertical-align: top;
position: relative;
top:40px;
}
.content .count{
display: inline-block;
width: 60px;
height: 20px;
}
.td span{
position:relative;
display:inline-block;
top: 3px;
background-color: rgb(226, 242, 255);
}
.reduce{
padding:0 2px;
}
.add{
position: relative;
left: -5px;
}
.hidden{
display: none;
}为某一类节点对象添加事件可以先获取到节点的集合，
for循环为每一个数组元素添加事件，在事件函数里使用this代表当前的
数组元素。
为啥动态添加的DOM，他的子元素没有事件效果?
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦