购物车功能实现
大神跟我说学好基本的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{width: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里的,触发的还是加操作。。。。求助大神要。。