jQuery 简易功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>demo1</title>
		<script src="../../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			li{
				list-style-type: none;
			}
			tr:nth-child(even){
				background-color: deepskyblue;
			}
			span{
				color: red;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$(".save").click(function(){
					
					$("span").html("");
					var name= $(".name").val();
					var price=$(".price").val();
					var num=$(".num").val();
					if(name.length<2||name.length>20){
						$(".n_span").html("商品名称必须在2-20个字符之间")
						return;
					}
					if(price==undefined||price==""){
						$(".p_span").html("商品价格不能为空")
						return;
					}
					if(num<=0){
						$(".num_span").html("商品数量必须大于0")
						return;
					}
					
					addGood();
					
					getTotal();
					
				})
				function addGood () {
					
					var name= $(".name").val();
					var price=$(".price").val();
					var num=$(".num").val();
					var type=$("select :selected").val();
					var sum=price*num;
					
					var n_tr="<tr class='n_tr'>"+
							"<td><input type='checkBox'/></td>"+
							"<td>"+name+"</td>"+
							"<td>"+price+"</td>"+
							"<td>"+num+"</td>"+
							"<td>"+type+"</td>"+
							"<td>"+sum+"</td>"+
							
							"<td><button onclick='del(this)'>删除</button></td>"+
							"</tr>";
							
							$("table").append(n_tr);
							getTotal();
					
				}
				
				$(".selectAll").click(function(){
					
					$(":checkBox").prop("checked",true);
					
				})
				
				$(".selectRevers").click(function(){
					
					$(":checkBox").each(function(){
						
						this.checked=!this.checked;
						
					})
					
				})
				
				$(".delAll").click(function(){
				
					$(":checkBox:checked").each(function(){
						$(this).parent().parent().remove();
					})
					getTotal();
					
				});
			});
			
			
			
			function getTotal () {
				
				var total = 0;
				$(".n_tr :nth-child(6)").each(function(){
					
					var xiaoji=$(this).text();
					total+=parseFloat(xiaoji);
					
				})
				
				$(".stotal").html("商品总价：￥"+total);
				
				
			}
			function del (a) {
				
				$(a).parent().parent().remove();
				getTotal();
				
			}
		</script>
		<link rel="stylesheet" type="text/css" href="../index2.css"/>
	</head>
	<body>
		<ul>
			<li>商品名称 ：<input class="name" /><span class="n_span"></span> </li>
			<li>商品价格 ：<input class="price" /><span class="p_span"></span> </li>
			<li>商品数量 ：<input class="num" /><span class="num_span"></span> </li>
			<li>商品类型 ：<select>
						<option>茶叶</option>
						<option>咖啡</option>
						</select> 
			</li>
			<li><button class="save">确定</button> </li>
		</ul>
		<button class="selectAll">全选</button>
		<button class="selectRevers">反选</button>
		<button class="delAll">批量删除</button>
		<table>
			<tr>
			<td>编号</td>
			<td>商品名称</td>
			<td>商品价格</td>
			<td>商品数量</td>
			<td>商品类别</td>
			<td>小计</td>
			<td>删除</td>
			</tr>
		</table>
		<p class="stotal">商品总价：￥0</p>
	</body>
</html>
猜你喜欢
