1 <style> 2 table { 3 text-align: center; 4 } 5 img { 6 height: 25px; 7 22px; 8 } 9 </style> 10 </head> 11 <body> 12 <table id="dataContent" border="1" cellpadding="0" cellspacing="0" width="60%" align="center"> 13 <thead> 14 <tr> 15 <th> 16 <input class="checkAllOrNot" type="checkbox"> 全选 17 </th> 18 <th>商品</th> 19 <th>单价</th> 20 <th>数量</th> 21 <th>小计</th> 22 <th>操作</th> 23 </tr> 24 </thead> 25 <tbody> 26 27 </tbody> 28 <tfoot> 29 <tr> 30 <td colspan="6"> 31 <input class="checkAllOrNot" type="checkbox"> 全选 32 <a href="#" onclick="return tableContent.deleteSpecifyGoods()">全部删除</a> 33 <span>已选商品：<span id="numTotal"></span>件</span> 34 <a href="#">显示或影藏</a> 35 <span>合计：<span id="priceTotal">3000.23</span></span> 36 <button>计算</button> 37 </td> 38 </tr> 39 </tfoot> 40 </table> 41 42 </body> 43 44 <script> 45 // 46 47 var bodyData = document.querySelector('#dataContent > tbody'); 48 var numTotal = document.getElementById('numTotal'); 49 var priceTotal = document.getElementById('priceTotal'); 50 51 // 获取两个全选的checkbox 52 var checkAllOrNot = document.getElementsByClassName('checkAllOrNot'); 53 var tfoot = document.querySelector('#dataContent > tfoot'); 54 55 var tableContent = { 56 datas: [{id: 1, name: 'apple手机', image: 'image/iphone.jpg', price: 3000.23, num: 2}, 57 {id: 2, name: '小米手机', image: 'image/iphone.jpg', price: 1999.23, num: 1}, 58 {id: 3, name: '荣耀手机', image: 'image/iphone.jpg', price: 1999.23, num: 1}, 59 {id: 4, name: '一加手机', image: 'image/iphone.jpg', price: 1999.23, num: 1}, 60 {id: 5, name: '锤子手机', image: 'image/iphone.jpg', price: 1999.23, num: 1}, 61 {id: 6, name: 'Mac Pro', image: 'image/iphone.jpg', price: 18000, num: 1} 62 ], 63 // 渲染数据, 求得商品的总数、商品的总价格 64 renderData: function() { 65 var length = this.datas.length; // 商品的种类数量 66 if(length == 0) { 67 tfoot.style.display = 'none'; 68 } 69 var n = 0; //统计商品的数量 70 var p = 0; //统计商品的总价 71 for(var i = 0; i < length; i++) { 72 // 获取单件商品 73 var good = this.datas[i]; 74 // 插入行 75 var row = bodyData.insertRow(); 76 77 // 商品信息的第一列， 就是checkbox 78 var cbCell = row.insertCell(); 79 cbCell.innerHTML = '<input onchange="checkSingleGood(this)" class="check-good" value="' + good.id + '" type="checkbox">'; 80 81 var goodInfoCell = row.insertCell(); 82 goodInfoCell.innerHTML = '<img src="' + good.image + '" /> ' + good.name; 83 84 var priceCell = row.insertCell(); //价格的格子 85 priceCell.innerText = good.price; 86 87 var numCell = row.insertCell(); //商品的数量格子 88 // <button onclick="tableContent.reduceNum(1)">-</button> 89 // <input value="1"> 90 // <button onclick="tableContent.addNum(1)">+</button> 91 numCell.innerHTML = '<button onclick="tableContent.reduceNum('+ good.id +')">-</button>'+ 92 '<input value="' + good.num + '"><button onclick="tableContent.addNum(' + good.id + ')">+</button>'; 93 n += good.num; 94 95 var totalCell = row.insertCell(); 96 // 做四舍五入在js中最优的方法是：Math.round(num * 100) / 100; 97 var singleGoodTotalPrice = Math.round(good.num * good.price * 100) / 100; 98 totalCell.innerText = singleGoodTotalPrice; //单个商品的总价 99 p += singleGoodTotalPrice; 100 101 var processCell = row.insertCell(); 102 processCell.innerHTML = '<button onclick="tableContent.deleteGoodById(' + good.id + ')">删除</button>'; 103 } 104 numTotal.innerText = n; 105 priceTotal.innerText = Math.round(p * 100) / 100; 106 }, 107 // 增加指定id的商品的数量 108 addNum: function(goodId) { 109 for(var i = 0; i < this.datas.length; i++) { 110 var good = this.datas[i]; 111 // 找到指定的商品，将其数量 +1, 加完了就不用往下之下 112 if(good.id == goodId) { 113 good.num++; 114 break; 115 } 116 } 117 bodyData.innerHTML = ''; // 将表格中之前的数据清空 118 this.renderData(); 119 }, 120 // 减少指定id的商品的数量 121 reduceNum: function(goodId) { 122 for(var i = 0; i < this.datas.length; i++) { 123 var good = this.datas[i]; 124 // 找到指定的商品，将其数量 -1, 减完了就不用往下之下 125 if(good.id == goodId) { 126 // 当数量为1的时候，就直接返回 127 if(good.num == 1) { 128 return; 129 } 130 good.num--; 131 break; 132 } 133 } 134 bodyData.innerHTML = ''; 135 this.renderData(); 136 }, 137 // 根据商品id删除对应的商品 138 deleteGoodById: function(goodId) { 139 for(var i = 0; i < this.datas.length; i++) { 140 var good = this.datas[i]; 141 // 找到对应的商品，然后删除 142 if(good.id == goodId) { 143 // splice(index, num); 144 this.datas.splice(i, 1); 145 break; 146 } 147 } 148 bodyData.innerHTML = ''; 149 this.renderData(); 150 }, 151 // 删除所有选中的商品 152 deleteSpecifyGoods: function() { 153 // console.log(this); 154 // 获取所有的商品的checkbox 155 var goodsCheckbox = document.getElementsByClassName('check-good'); 156 var ids = []; // 存储的是所有的选中的商品的id 157 158 // 循环找到那些被被选中了， 被选中的checked状态为true 159 for(var i = 0; i < goodsCheckbox.length; i++) { 160 // 选中了的checkbox就获取其id 161 if(goodsCheckbox[i].checked) { 162 // 获取到 goodsCheckbox[i].value, 获取到的是字符串 163 ids.push(Number(goodsCheckbox[i].value)); // 将所有选中数据的id存储到数组中 164 } 165 } 166 167 // console.log(ids); 168 169 // 如果没有被选中的id, 就直接退出 170 if(ids.length == 0) { 171 return false; 172 } 173 174 for(var i = 0; i < this.datas.length; i++) { 175 var goodId = this.datas[i].id; //获取商品的id 176 //console.log(goodId) 177 // ids.indexOf(goodId) > -1 178 // 如果所有的被选中的id中如果包含了当前的商品的id 179 if(ids.indexOf(goodId) > -1) { 180 this.datas.splice(i, 1); 181 } 182 } 183 bodyData.innerHTML = ''; 184 this.renderData(); 185 return false; 186 } 187 } 188 189 /** 190 * 根据每个商品的选中决定全选按钮是否选中 191 */ 192 function checkSingleGood(checkboxTag) { 193 194 var flag = true; // 假设全选checkbox是选中状态 195 196 var goodsCheckbox = document.getElementsByClassName('check-good'); 197 198 for(var i = 0; i < goodsCheckbox.length; i++) { 199 // 活的到当前遍历的checkbox的状态 200 var currentStatus = goodsCheckbox[i].checked; 201 // 只要有一个没被选中，那么 "全选" 肯定是不选中状态 202 if(!currentStatus) { 203 flag = false; 204 break; // 只要找到一个，就一票否决 205 } 206 } 207 208 changeCheckAllStatus(flag); 209 } 210 211 // 改变 "全选" 的checkbox的状态, 参数接收boolean: true false 212 function changeCheckAllStatus(flag) { 213 for(var i = 0; i < checkAllOrNot.length; i++) { 214 checkAllOrNot[i].checked = flag; 215 } 216 } 217 218 // 给两个全选的 checkbox绑定onchange事件 219 for(var i = 0; i < checkAllOrNot.length; i++) { 220 221 // 获取到每一个 "全选" checkbox 222 var cAllOrNot = checkAllOrNot[i]; 223 // 给每一个 "全选" checkbox 绑定索引 224 cAllOrNot.n = i; 225 226 cAllOrNot.onchange = function() { 227 // 获取到商品前的所有的checkbox 228 var goodsCheckbox = document.getElementsByClassName('check-good'); 229 230 for(var j = 0; j < goodsCheckbox.length; j++) { 231 // 让所有商品前的checkbox的状态与 "全选的checkbox"的状态保持一致 232 goodsCheckbox[j].checked = this.checked; 233 } 234 // 获取到当前点击的checkbox在checkAllOrNot中的索引 235 var n = this.n; 236 237 // 如果当前点击的 "全选", 索引为0的时候，就让1和我的状态保持一致 238 // 之所以可以这么来写，原因在于 "全选"的checkbox就两个，只要让对方的状态和保持一致就可以了 239 if(n == 0) { 240 checkAllOrNot[1].checked = this.checked; 241 } 242 if(n == 1) { 243 checkAllOrNot[0].checked = this.checked; 244 } 245 246 // checkAllOrNot[1 - n].checked = this.checked; 247 } 248 } 249 250 tableContent.renderData(); 251 252 /** 因为每次添加数量，减少数量，或者删除的时候，都会重新渲染. 253 var goodsCheckbox= document.getElementsByClassName('check-good'); 254 255 for(var i = 0; i < goodsCheckbox.length; i++) { 256 goodsCheckbox[i].onchange = function() { 257 alert(34); 258 } 259 } 260 */ 261 </script>
效果：（图片可以自己找）
