zoukankan      html  css  js  c++  java
  • 购物车功能实现

    大神跟我说学好基本的jquery只需要做好三个基本功能就好了,第一个是购物车。现在开始实践,css神马的就忽略简单点了。其实这个主要就是dom操作和选择器的应用。大神果然比较牛。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">table{100%;}</style>
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <title>position</title>
    </head>
    
    <body>
    <table id="product" border="1">
    <tbody>
    <tr><th>product number</th><th>price</th><th>choose</th></tr>
    <tr><td>1</td><td>20</td><td><input type="checkbox" name="items" /></td>
    <tr><td>2</td><td>100</td><td><input type="checkbox" name="items" /></td>
    <tr><td>3</td><td>50</td><td><input type="checkbox" name="items" /></td>
    <tr><td>4</td><td>10</td><td><input type="checkbox" name="items" /></td>
    </tbody>
    </table>
    <h3>result:</h3>
    <table id="choose" border="1">
    <tbody>
    <tr><th>product number</th><th>price</th><th>delete</th></tr>
    </tbody>
    </table>
    <p id="result">total:<span>0</span></p>
    <script type="text/javascript">
    $(function(){
      //table style
       $('table tr:odd').css('background','#b1b1b1'); 	
       //choose appendto,compute result
       var $choose = $('#product').find('input');
       $($choose).click(function(e){
    	   alert(1);
    	   $(this).parents('tr').appendTo('#choose tbody');
    	   var add = $(this).parent('td').prev().text();
    	   var add1= parseInt(add,10);
    	   var result = $('#result span').text();
    	    var result1= parseInt(result,10);
    		result1+=add1;
    		$('#result span').text(result1);
    	   });
    	 var $delete = $('#choose').find('input');
           $($delete).click(function(e){
    	   $(this).parents('tr').appendTo('#product tbody');
    	   var add = $(this).parent('td').prev().text();
    	   var add1= parseInt(add,10);
    	   var result = $('#result span').text();
    	    var result1= parseInt(result,10);
    		result1-=add1;
    		$('#result span').text(result1);
    	   });
    	   	
    });
    </script>
    </div>
    </body>
    </html>
    

     遇到的问题,非常奇怪啊,做删除时,那个input所携带的事件还是在商品table里的,触发的还是加操作。。。。求助大神要。。

  • 相关阅读:
    拷贝构造函数 转型构造函数
    构造函数对const成员的初始化
    拷贝构造函数
    类数据成员和类成员函数
    顶层函数进行操作符重载与操作符重载直接作为类的构造函数
    构造函数和new 与new【】 析构函数
    Openfire+XIFF实时通信&一个特殊的GP
    客户端数据动态渲染
    数据处理:由面得点,构造其边界
    从GISALL博客搬家而来
  • 原文地址:https://www.cnblogs.com/qiyueshihuang/p/2233571.html
Copyright © 2011-2022 走看看