大神跟我说学好基本的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里的,触发的还是加操作。。。。求助大神要。。