jquery练习01_购物车(全网最强jquery练习)

最新推荐文章于 2023-09-25 23:56:30 发布

跟着宝哥学java

最新推荐文章于 2023-09-25 23:56:30 发布

4415

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/mtb278750/article/details/129792264

版权

1购物车

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery练习01购物车</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
    table{
      width:800px;
      margin:10px auto;
      border:1px solid blue;
      border-collapse: collapse;
    }
    td,th{
      border:1px solid blue;
      padding:10px;
      text-align: center;
    }
    #font_count{
       background-color: #aaaaaa;
       color:red;
       font-weight: bold;
    }
</style>
</head>
<body>
    <table id="tab_goods">
       <tr>
          <th colspan="6" style="text-align: left;">
             <input type="button" value="添加商品" id="but_add"/> |
             <input type="button" value="反选商品" id="but_fan"/>  |
             <input type="button" value="删除选中" id="but_del"/> |
             <span>商品的总价：<font id="font_count">0元</font></span>
          </th>
       </tr>
       <tr>
          <th>顺序</th><th>名称</th><th>数量</th><th><a href="javascript:sortPrice();">单价</a></th><th>厂家</th><th><input type="checkbox" name="box_all"/></th>
       </tr>
    </table>
    <script type="text/javascript">
        //延伸练习：单价可以点击 点击可以排序：正序和倒序
        function sortPrice(){
        	alert("排序");
        }
        //给id="but_del"注册事件：删除选中的商品
        $(function(){
        	$("#but_del").click(function(){
        		$.each($("input[name='box_goods']:checked"),function(i,n){
        			 $(n).parents("tr").remove();
        			 //parents方法获取所有的祖先标签
        			 //remove方法 删除标签
        		});
        		//重新计算总价格
				setFontText();
        	});
        });
        
        //当有商品选中时：显示总价格在id="font_count"中
        function setClickEvent(){
        	$("input[name='box_goods']").unbind();
        	$("input[name='box_goods']").click(setFontText);
        }
        //创建一个方法 统计被选中的checkbox的总价格
        function setFontText(){
        	var sum=0;
    		$.each($("input[name='box_goods']:checked"),function(i,n){
    			//找到当前input的tr祖先标签
    			var $tr=$(n).parents("tr");
    			//获取tr的所有td子标签
    			var collTd=$tr.children("td");
    			var num=collTd[2].innerText;
    			var price=collTd[3].innerText;
    			sum+=parseFloat(num)*parseFloat(price);
    		});
    		//把sum设置为id="font_count"的文本内容
    		$("#font_count").text(parseInt(sum*100)/100+"元");
        }
        
        //给box_all注册点击事件：box_all被选中 所有的name='box_goods'都别选中 
		// box_all取消选中 所有的name='box_goods'都取消选中
		$(function(){
			$("input[name='box_all']").bind("click",function(){
				//alert($(this).attr("checked"));
				var bchecked=$(this).attr("checked");
				$("input[name='box_goods']").attr("checked",bchecked);
				//重新计算总价格
				setFontText();
			});
		});
        
        //反选
        $(function(){
        	$("#but_fan").bind("click",function(){
        		$.each($("input[name='box_goods']"),function(i,n){
        			$(n).attr("checked",!$(n).attr("checked"));
        		});
        		//重新计算总价格
				setFontText();
        	});
        });
        
        //通过js在tab_goods添加5个商品
        $(function(){
        	var arr=[["铅笔","上海"],["笔记本","新华"],["橡皮","中原"],["皮鞋","意尔康"],["上衣","森马服饰"],["铅笔","上海"],["笔记本","新华"],["橡皮","中原"],["皮鞋","意尔康"],["上衣","森马服饰"]];
        	
        	for(var i=0;i<arr.length;i++){
        		//创建tr
        		var $tr=$("<tr></tr>");
        		$tr.append($("<td>"+(i+1)+"</td>"));
        		$tr.append($("<td>"+arr[i][0]+"</td>"));
        		$tr.append($("<td>"+(parseInt(Math.random()*10))+"</td>"));
        		$tr.append($("<td>"+(parseInt(Math.random()*100)/10)+"</td>"));
        		$tr.append($("<td>"+arr[i][1]+"</td>"));
        		$tr.append($("<td><input type='checkbox' name='box_goods'/></td>"));
        		$("#tab_goods").append($tr);
        	}
        	
        	//设置form_add默认是隐藏的
        	$("#form_add").hide();
        	
        	//点击but_add时 form_add显示
        	$("#but_add").bind("click",function(){
        		$("#form_add").show();
        	});
        	
        	//给form_add注册提交事件
        	$("#form_add").submit(function(){
        		//获取表单的信息 把信息添加到tab_add_goods表格中
        		var $tr=$("<tr></tr>");
        		$tr.append($("<td>"+($("#tab_goods tr").length-1)+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gname']").val())+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gprice']").val())+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gnum']").val())+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gaddress']").val())+"</td>"));
        		$tr.append($("<td><input type='checkbox' name='box_goods'/></td>"));
        		$("#tab_goods").append($tr);
        		
        		setTrColor();//各行变色
            	gaoLiang();//高亮
            	setClickEvent();//给所有的checkbox添加点击事件
        		return false;//阻止表单提交
        		
        	});
        	
        	//各行变色
        	setTrColor();
        	
        	//高亮
        	gaoLiang();
        	
        	//给所有的checkbox添加点击事件
        	setClickEvent();
        });
        //定义一个全局变量记录 鼠标移入的tr的当前背景颜色
        var vbgcolor="";
        //方法实现鼠标悬停 高亮
        function gaoLiang(){
        	$("#tab_goods tr:gt(1)").unbind();//移除以前所有的事件
        	$("#tab_goods tr:gt(1)").hover(function(){
        		    vbgcolor= $(this).css("background-color");//先记录背景颜色的值
        		    $(this).css("background-color","#aa6666");//更改
        		},function(){
        			 $(this).css("background-color",vbgcolor);//更改为原来的值
        	});
        }
        //方法实现各行变色
        function setTrColor(){
        	$("#tab_goods tr:even").css("background-color","#aacc99");
        	$("#tab_goods tr:odd").css("background-color","#99aacc");
        }
    </script>
    <hr/>
    <form id="form_add" >
        <table id="tab_add_goods">
            <tr>
               <th>商品名称</th><td><input type="text" name="gname"/></td>
            </tr>
            <tr>
               <th>商品单价</th><td><input type="text" name="gprice"/></td>
            </tr>
            <tr>
               <th>商品数量</th><td><input type="text" name="gnum"/></td>
            </tr>
            <tr>
               <th>商品厂家</th><td><input type="text" name="gaddress"/></td>
            </tr>
            <tr>
               <th colspan="2">
                   <input type="submit" value="添加"/>
               </th>
            </tr>
        </table>
    </form>
</body>
</html>

2 实现按单价排序

//定义一个全局变量 记录倒序还是正序
var n=0;
//延伸练习：单价可以点击 点击可以排序：正序和倒序
function sortPrice(){
    //获取tab_goods中tr索引大于1的tr 就是所有的商品
    var $collTr=$("#tab_goods tr:gt(1)");
    //把jquery对象转化为数组对象
    var arrTr=$collTr.toArray();
    //根据tr的第四个td的文本内容进行排序
    //使用顺序排序
    /*
        	for(var i=0;i<arrTr.length-1;i++){
        		for(var j=i+1;j<arrTr.length;j++){
        			 //获取tri的单价 和trj的单价
        			 //var pricei=parseFloat(arrTr[i].getElementsByTagName("td")[3].innerText);
        			 var pricei=parseFloat($(arrTr[i]).children("td:eq(3)").text());
        			 var pricej=parseFloat($(arrTr[j]).children("td:eq(3)").text());
       				 if((n==1&&pricei>pricej)||(n==0&&pricei<pricej)){
           				 var tr=arrTr[i];arrTr[i]=arrTr[j];arrTr[j]=tr;
           			 }
        		}
        	}*/
    //使用js中的方法进行排序
    arrTr.sort(function(tri,trj){
        var pricei=parseFloat($(tri).children("td:eq(3)").text());
        var pricej=parseFloat($(trj).children("td:eq(3)").text());
        return pricei==pricej?0:(pricei>pricej?1:-1);
    });
    if(n==1){
        arrTr.reverse();
    }
    //把数组再重新装入数组中
    for(var i=0;i<arrTr.length;i++){
        $(arrTr[i]).children("td:first").text(i+1);//设置第一列顺序的值
        $("#tab_goods").append($(arrTr[i]));//把tr重新装入table中
    }
    //重新隔行变色
    setTrColor();

    //下次在点击是反照排序
    n=(n+1)%2;
}