?function?c(str)?{
????????????return?document.createElement(str)
????????}
????????let?list?=?[
????????????{
????????????name:?'可比克',
????????????img:?'https://img13.360buyimg.com/n7/jfs/t1/146714/4/279/253714/5edf3844E3467d2ff/16a13dd05f2718c5.jpg',
????????????count:?1,
????????????price:?5
????????},
????????{
????????????name:?'樂事',
????????????img:?'https://img13.360buyimg.com/n7/jfs/t1/146714/4/279/253714/5edf3844E3467d2ff/16a13dd05f2718c5.jpg',
????????????count:?1,
????????????price:?6
????????},
????????{
????????????name:?'上好佳',
????????????img:?'https://img13.360buyimg.com/n7/jfs/t1/146714/4/279/253714/5edf3844E3467d2ff/16a13dd05f2718c5.jpg',
????????????count:?1,
????????????price:?3
????????},
????????]
????????let?theader=['名稱','圖片','價格','數(shù)量','小計','操作']
????????//創(chuàng)建表格
????????let?tb=c('table')
????????tb.classList.add('tb')
????????document.body.appendChild(tb)
????????//創(chuàng)建表頭
????????let?tr=c('tr')
????????theader.forEach(function(item){
????????????let?th=c('th')
????????????th.innerHTML=item
????????????tr.appendChild(th)
????????})
????????tb.appendChild(tr)
????????//生成內(nèi)容
????????list.forEach(function(item){
????????????let?tr=c('tr')
????????????let?td=c('td')
????????????td.innerHTML=item.name
????????????tr.appendChild(td)
????????????let?td1=c('td')
????????????let?img=c('img')
????????????img.src=item.img
????????????tr.appendChild(td1)
????????????td1.appendChild(img)
????????????let?td2=c('td')
????????????td2.innerHTML=item.count
????????????tr.appendChild(td2)
????????????let?td3=c('td')
????????????td3.classList.add('counter')
????????????let?btn1=c('button')
????????????btn1.innerHTML='-'
????????????btn1.onclick=function(){
????????????????let?val=parseInt(input.value)
????????????????val--
????????????????if(val<1)val=1
????????????????input.value=val
????????????????//更新小計
????????????????td4.innerHTML=val*item.price
????????????}
????????????td3.appendChild(btn1)
????????????let?input?=c('input')
????????????input.value=item.count
????????????//當(dāng)文本框輸入時觸發(fā)input事件
????????????input.oninput=function(e){
????????????????//e.target代表觸發(fā)本次事件的對象
????????????????let?val=e.target.value
????????????????//不能為空
????????????????if(!val)val=1
????????????????//如果輸入非數(shù)字，則還原1
????????????????if(isNaN(val))val=1
????????????????else{
????????????????????val=parseInt(val)
????????????????????if(val<1)val=1
????????????????}
????????????????//拿到過濾之后的有效值，進(jìn)行計算小計
????????????????td4.innerHTML=val*item.price
????????????????//拿更新好的有效值，更新Input
????????????????input.value=val
????????????}
????????????td3.appendChild(input)
????????????let?btn2=c('button')
????????????btn2.innerHTML='+'
????????????btn2.onclick=function(){
????????????????let?val?=parseInt(input.value)
????????????????val++
????????????????input.value=val
????????????????//更新小計
????????????????td4.innerHTML=val*item.price
????????????}
????????????td3.appendChild(btn2)
????????????tr.appendChild(td3)
????????????let?td4=c('td')
????????????td4.innerHTML=item.count*item.price
????????????tr.appendChild(td4)
????????????let?td5=c('td')
????????????td5.innerHTML='刪除'
????????????td5.onclick=function(){
????????????????tr.remove()
????????????}
????????????tr.appendChild(td5)
????????????tb.appendChild(tr)
????????})
?<style>
????????.tb{
????????????text-align:?center;
????????????width:?800px;
????????????border-collapse:none?;
????????}
????????.tb?img{
????????????width:?80px;
????????????height:?80px;
????????}
????????.tb?th,.tb?td{
????????????border:?1px?solid?#cccccc;
????????????padding:?10px;
????????}
????????.counter?input{
????????????width:?20px;
????????????text-align:?center;
????????}
????</style>
