此实验的注意事项：
- 对于button的disabled的属性的掌握不足，导致数量减少到0后再点击增加后数量增加仍没有减少的功能，disabled在js中必须用true或false，开始一直用‘true'导致错误，注意是关键字啊；
- 对于children与childNode的理解不足，不知道此可以检测到空文本节点，所以导致调试半天也没反应，所以即使清除文本节点；
- 注意各个事件所触发的事件，注意联动效果；
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .table_css{ 8 border:#5524E3 2px solid; 9 background:#E5CDCE; 10 margin-left:400px; 11 } 12 td{ 13 border:#1749BC 1px solid; 14 text-align:center; 15 } 16 button{ 17 background:#3AD8A9; 18 color:#EC214D; 19 width:20px; 20 } 21 #money{ 22 background:#9B9494; 23 width:30px; 24 } 25 #add{ 26 width:80px; 27 } 28 .hr_css{ 29 height:10px; 30 width:100%; 31 background:#D825D2; 32 } 33 #goods{ 34 width:580px; 35 } 36 </style> 37 38 <script> 39 function $(id){ 40 return document.getElementById(id); 41 } 42 window.onload=function(){ 43 var add=$('add'); 44 add.onclick=addgoods; 45 } 46 function addgoods(){ 47 var goods = document.getElementsByTagName('tr'); 48 var name=$('name').value; 49 //判断此元素是否存在于购物车中 50 for(var i=3;i<goods.length;i++){ 51 if(goods[i].firstChild.innerHTML==name){ 52 alert('此物品已经添加！'); 53 return; 54 } 55 } 56 57 var price=$('price').value; 58 var amount=$('amount').value; 59 var t=$('goods'); 60 var tr=t.insertRow(1); 61 //分别创建列 62 var td_1 = tr.insertCell(0); 63 td_1.innerHTML = name; 64 65 var td_2 = tr.insertCell(1); 66 td_2.innerHTML = price; 67 68 var td_3 = tr.insertCell(2); 69 //------------------------------- 70 var remove_1=document.createElement('button'); 71 remove_1.id='remove_1'; 72 remove_1.innerHTML='-'; 73 td_3.appendChild(remove_1); 74 remove_1.onclick=function(){ 75 var count_text = this.parentNode.firstChild.nextSibling; 76 //判断数量 77 if(count_text.value<=0){ 78 this.disabled=true;//"disabled"; 79 return; 80 } 81 //数量减少 82 count_text.value = window.parseInt(count_text.value)-1; 83 //总价减少 84 this.parentNode.nextSibling.innerHTML = count_text.value*price; 85 //购物车的总价减少 86 $('money').innerHTML=window.parseInt($('money').innerHTML)-price; 87 //数量减少 88 amount-=1; 89 } 90 //nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn 91 var td_amount = document.createElement('input'); 92 td_amount.type="text"; 93 td_amount.value = amount; 94 td_amount.style.background="#E5CDCE"; 95 td_amount.style.textAlign='center'; 96 td_amount.onblur=function(){ 97 var cc=td_amount.value; 98 if(cc==amount) 99 return; 100 else{ 101 $('money').innerHTML=window.parseInt($('money').innerHTML)+cc*price-this.parentNode.nextSibling.innerHTML; 102 this.parentNode.nextSibling.innerHTML=cc*price; 103 } 104 } 105 106 td_3.appendChild(td_amount); 107 //++++++++++++++++++++++++++++++++ 108 var add_1=document.createElement('button'); 109 add_1.id='add_1'; 110 add_1.innerHTML='+'; 111 td_3.appendChild(add_1); 112 add_1.onclick=function(){ 113 this.parentNode.firstChild.disabled=false; 114 //数量增加 115 var count_text = this.parentNode.firstChild.nextSibling; 116 count_text.value = window.parseInt(count_text.value)+1; 117 //总价增加 118 this.parentNode.nextSibling.innerHTML = count_text.value*price; 119 //购物车的总价增加 120 $('money').innerHTML=window.parseInt($('money').innerHTML)+window.parseInt(price); 121 //数量增加 122 amount+=1; 123 } 124 125 var td_4 = tr.insertCell(3); 126 td_4.innerHTML = price*amount; 127 128 var td_5 = tr.insertCell(4); 129 var remove = document.createElement('button'); 130 remove.innerHTML = "删除"; 131 remove.style.width= '50px'; 132 remove.onclick = function() { 133 var remove_tr = this.parentNode.parentNode; 134 //购物车中的元素减少，钱也相应的减少 135 $('money').innerHTML=window.parseInt($('money').innerHTML)-td_4.innerHTML; 136 //移除元素 137 $('goods').firstChild.removeChild(remove_tr); 138 } 139 td_5.appendChild(remove); 140 141 //总的价格变化 142 var count_all=$('money').innerHTML; 143 $('money').innerHTML=price*amount+window.parseInt(count_all); 144 } 145 146 </script> 147 148 </head> 149 150 <body> 151 <table class="table_css"> 152 <tr> 153 <td>物品</td> 154 <td>价格</td> 155 <td>数量</td> 156 <td></td> 157 </tr> 158 <tr> 159 <td><input type="text" id="name"></td> 160 <td><input type="text" id="price"></td> 161 <td><input type="text" id="amount"></td> 162 <td><button id="add">添加</button></td> 163 </tr> 164 </table> 165 <hr class="hr_css"> 166 <table id="goods" class="table_css"><tr> 167 <td>物品</td> 168 <td>价格</td> 169 <td>数量</td>> 170 <td>总价</td> 171 <td></td> 172 </tr> 173 </table> 174 总计：<label id="money">0</label>元 175 </body> 176 </html>