实现商品数据传输渲染到页面,点击删除当次订单
html: <!DOCTYPE html> |
css:
.wrapper{
width: 1440px; /*border: 1px solid #000;*/ margin: 0 auto; } .wrapper>div{ padding:0 105px ; } .row_one{ height: 31px; background-color: #f4f4f4; line-height: 31px; } .right{ font-size: 12px; float: right; margin-right: 20px; } .a8{ color: #b41e23; } .a7{ color: #999999; } .a6{ color: #000000; }
.rightword{
/*margin-left: 1048px;*/ height: 31px; line-height: 32px; float: right; } .row_two{ height: 860px; background-color: #fafafa; border-top: 1px solid #e5e5e5; border-bottom:1px solid #e5e5e5 ; } .logo{ width: 99px; height: 40px; background-image: url(../img/logo.png); background-size: 99px 40px; margin-top: 9px; float: left; } .row_two>p{ margin-top: 16px; font-size: 18px; float: left; } .row_two_1{ height: auto; border: 1px solid #e5e5e5 ; margin-top: 74px; background-color: #fff; } #active01{ height: auto; } .row_two_1_a{ height: 61px; } .row_two_1_a li{ text-align: center; float: left; height: 61px; line-height: 61px; font-size: 12px; } .clear{ width: 50px; height: 29px; background-color: #b41e23; margin-left:890px ; border: none; /*padding-left: 905px;*/ } .li1{ width: 408px; } .li2{ width: 205px; } .li2 a:hover{ color:#b41e23 ; } .row_two_1_b{ font-size: 12px; line-height: 42px; height: 42px; background-color: #fae8e8; } .span2{ font-weight: bold; margin-right: 22px; padding-left: 22px; } .c1{ border-bottom: 1px dashed #e5e5e5; } .ul1{ height: 142px; } .ul1 li{ float: left; height: 142px; /*padding: 20px 0px 0 0px;*/ } .li2{ text-align: center; } .img{ float: left; width: 100px; height: 100px; background-size: 100px 100px; margin: 20px 0 0 20px; }
.shopping{
height: auto; } .wz{ margin-top: 20px; overflow: hidden; /*text-overflow: ellipsis;*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-left: 15px; float: left; width: 273px; height: 40px; } .a1{ color: #666666; font-size: 12px; } .li2 p{ margin-top: 20px; } .p1{ font-weight: bold; } .p2{ color: #b41e23; } /*第二行结束*/ /*第三行开始*/ .row_three{ height:58px ; background-color: #f4f4f4; } .row_three_1{ height: 58px; width: 825px; float: left; } .row_three_2{ height: 58px; width: 405px; float: left; } .li3{ height: 58px; width: 64px; float: right; line-height: 58px; } .a2{ color: #999999 ; font-size: 12px; } .li4{ height: 58px; line-height: 58px; } /*第三行结束*/ |
JS:
<script type="text/javascript">
var active01=document.getElementById('active01'); var arr = [ { time:"2018-10-09", numb:"23959345783458275", clear:"删除", neirong:[ {img:"img/book01.jpg",neirong1:"七年级七册包邮 西游记原著正版朝花夕拾鲁迅初中生呐喊猎人湘行散记镜花缘白洋淀纪事世界经典...",neirong2:"¥55.80",neirong3:"1",neirong4:"¥55.80"}, {img:"img/mod01.jpg",neirong1:"日本正品代购 资生堂心机2014年新款 润彩唇膏、口红 保湿滋润持久",neirong2:"¥198.00",neirong3:"1",neirong4:"¥198.00"} ] }, { time:"2018-10-09", numb:"23959345783458275", clear:"删除", neirong:[ {img:"img/cloth01.jpg",neirong1:"2018秋冬新款女装减龄慵懒风v领毛衣女宽松套头显瘦长袖针织衫潮",neirong2:"¥300.00",neirong3:"1",neirong4:"¥300.80"}, ] }, { time:"2018-10-09", numb:"23959345783458275", clear:"删除", neirong:[ {img:"img/mod01.jpg",neirong1:"日本正品代购 资生堂心机2014年新款 润彩唇膏、口红 保湿滋润持久",neirong2:"¥198.00",neirong3:"1",neirong4:"¥198.00"} ] } ] for(var i=0;i<arr.length;i++){ active01.innerHTML +=` <div id="shopping${i}" class="shopping"> </div> ` } var shopping=document.getElementsByClassName("shopping"); for(var i=0;i<arr.length;i++){ shopping[i].innerHTML += ` <div class="row_two_1_b" id="row_two_1_b"> <p> <span class="span2">${arr[i].time}</span>订单号:${arr[i].numb} <input type="reset" id="span${i}" onclick="fun(shopping${i})" class="clear" value="${arr[i].clear}"/> </p> </div> ` for(var j = 0;j<arr[i].neirong.length;j++){ shopping[i].innerHTML += ` <ul class="ul1"> <li class="li1"> <a class="a1" href="" > <img class="img" src="${arr[i].neirong[j].img}"> <div class="wz">${arr[i].neirong[j].neirong1} </div> </a> </li> <li class="li2"> <p class="p1">${arr[i].neirong[j].neirong2}</p> </li> <li class="li2"> <p>${arr[i].neirong[j].neirong3}</p> </li> <li class="li2"> <p class="p1 p2">${arr[i].neirong[j].neirong4}</p> </li> <li class="li2"> <p><a class="a1" href="">再次交易</a></p> </li> </ul> ` } } function fun(id){ id.innerHTML='' }
</script>
|