css+js简单实现购物车全选，添加，删除，总计

css+js简单实现购物车全选，添加，删除，总计

		<tr align="center">  <!-- 2行 -->
			<td><input type="checkbox" id="ckAll" onclick="checkAll()"/>全选</td>
			<td>商品名称</td>
			<td>商品价格</td>
			<td>商品数量</td>
			<td>小计</td>
			<td>删除</td>
		</tr>
		<tr align="center"> <!-- 3行 -->
			<td><input type="checkbox" name="checkItem"/></td>
			<td>雪花啤酒</td>
			<td><div class="price">5</div></td>
			<td><img src="image/add.png" name="add" onclick="addnumber(this)"><div name="counterDiv">5</div><img src="image/cut.png" name="cut" onclick="cutnumber(this)"></td> <!-- <input type="number" id="sumcounter1" min="5" step="1" max="10" value="5"/> -->
			<td><div name="sumprice">25</div></td>
			<td><input type="button" name="deletetd" value="删除" onclick="deletetd(this)" /></td>
		</tr>
		<tr align="center"> <!-- 4行 -->
			<td><input type="checkbox" name="checkItem" /></td>
			<td>辣条</td>
			<td>4</td>
			<td><img src="image/add.png" name="add" onclick="addnumber(this)"><div name="counterDiv">5</div><img src="image/cut.png" name="cut" onclick="cutnumber(this)"></td>
			<td><div name="sumprice">20</div></td>
			<td><input type="button" name="deletetd" value="删除" onclick="deletetd(event.target)"/></td>
		</tr>
		<tr align="center">
			<td><input type="button" id="DeletecheckItem" onclick="deleteChecked()" value="删除选中商品"/></td>
			<td colspan="5">总计：<div id="sum" style="display: inline;">45</div></td>
		</tr>
	</table>
	
	<script type="text/javascript">
		function addnumber(obj){ //计数器加
			var tr=obj.parentNode.parentNode;
			var col=tr.cells;
			var price=col[2].textContent;//获取单元格的内容,价格
			var counter=col[3].textContent;
			
			counter++;
			col[3].innerHTML="<img src='image/add.png' name='add' onclick='addnumber(this)'><div name='counterDiv'>"+counter+"</div><img src='image/cut.png' name='cut' onclick='cutnumber(this)'>";

			col[4].innerHTML="<div name='sumprice'>"+price*counter+"</div>";//赋值
			
			
			var mytable=document.getElementById("mytable");
			var sum=0;
			for(var i=2;i<mytable.rows.length-1;i++){
				sum=parseInt(sum)+parseInt(((mytable.rows[i]).cells[4]).textContent);
			}
			document.getElementById("sum").innerHTML="<div name='sumprice' style='display: inline;'>"+sum+"</div>";
		}
		
		function cutnumber(obj){ //计数器减
		    var tr=obj.parentNode.parentNode;//获取当前行的tr对象
		    var col=tr.cells;
		    var price=col[2].textContent;//获取单元格的内容,价格
		    var counter=col[3].textContent;
		    
		    counter--;
		    col[3].innerHTML="<img src='image/add.png' name='add' onclick='addnumber(this)'><div name='counterDiv'>"+counter+"</div><img src='image/cut.png' name='cut' onclick='cutnumber(this)'>";
		    
		    col[4].innerHTML="<div name='sumprice'>"+price*counter+"</div>";//赋值
			
			var mytable=document.getElementById("mytable");
			var sum=0;
			for(var i=2;i<mytable.rows.length-1;i++){
				sum=parseInt(sum)+parseInt(((mytable.rows[i]).cells[4]).textContent);
			}
			document.getElementById("sum").innerHTML="<div name='sumprice' style='display: inline;'>"+sum+"</div>";
		}
		
		function checkAll(){ //全选
			var checkStatue=document.getElementById("ckAll").checked;
			var checkItem=document.getElementsByName("checkItem");
			for(var i in checkItem){
				checkItem[i].checked=checkStatue;
			}
		}
		
		function deleteChecked()  //删除所选商品
		{
			var sum=document.getElementById("sum").textContent;//取表格的总计
			var mytable=document.getElementById("mytable");
			var checkItem=document.getElementsByName("checkItem");
			var cutsum=0;
			for(var i=checkItem.length-1;i>=0;i--){
				if(checkItem[i].checked==true){
					var tr=checkItem[i].parentNode.parentNode;
					cutsum=parseInt(cutsum)+parseInt(tr.cells[4].textContent);//取删除时的总计
					tr.remove();
				}
			}
			document.getElementById("sum").innerHTML="<div name='sumprice' style='display: inline;'>"+(sum-cutsum)+"</div>";
		}
		
		function addgoods(){  //添加商品
			var name=document.getElementById("goodsname").value;
			var price=document.getElementById("goodsprice").value;
			var count=document.getElementById("sumcounter3").value;
			var mytable=document.getElementById("mytable");
			
			var sum=document.getElementById("sum").textContent;
			sum=parseInt(sum)+price*count;
			document.getElementById("sum").innerHTML="<div name='sumprice' style='display: inline;'>"+sum+"</div>";
			
			mytable.insertRow(mytable.rows.length-1).innerHTML="<tr align='center'>"
			     +"<td align='center'><input type='checkbox' name='checkItem'/></td>  "
			     +" <td align='center'>"+name+"</td> "
				 +" <td align='center'>"+price+"</td> "
				 +" <td align='center'><img src='image/add.png' name='add' onclick='addnumber(this)'><div name='counterDiv'>"+count+"</div><img src='image/cut.png' name='cut' onclick='cutnumber(this)'></td> "
				 +" <td align='center'><div name='sumprice'>"+price*count+"</div></td>  "
				 +" <td align='center'><input type='button'  name='deletetd' value='删除' onclick='deletetd(this)' /></td>"
				 +"</tr>"
		}
		
		function deletetd(obj){ //删除单行的商品
			var sum=document.getElementById("sum").textContent;//取表格的总计
			var tr=obj.parentNode.parentNode;
			tr.remove();
			document.getElementById("sum").innerHTML="<div name='sumprice' style='display: inline;'>"+(sum-parseInt(tr.cells[4].textContent))+"</div>";
		}
	</script>
</body>

商品名称 商品价格 商品数量

未完善：商品数量可以为负，参考时可对商品数量进行判断，当数量小于等于0时，不能进行减操作。添加商品时，商品名称和价格未进行判空操作。

效果图 点击添加可进行商品的添加，删除可删除此行的商品，也可删除选中的全部商品，总计随删除和添加商品一起变化。