会python真的可以为所欲为0(回)
333天前
这里还有人吗1(回)
518天前这里还有人吗0(回)
518天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
742天前到处都是羊，不想上班0(回)
822天前
鸽子
0(回)
827天前<!DOCTYPE html> |
<html> |
<head> |
<title>购物车</title> |
<meta charset="utf-8" /> |
<style type="text/css"> |
h1 { |
text-align:center; |
} |
table { |
margin:0 auto; |
width:60%; |
border:2px solid #aaa; |
border-collapse:collapse; |
} |
table th, table td { |
border:2px solid #aaa; |
padding:5px; |
} |
th { |
background-color:#eee; |
} |
</style> |
<script src="../js/jquery-1.11.1.js"></script> |
<script> |
//加入购物车 |
function add_shoppingcart(btn){ |
//obj.eq(i)==$(obj[i]) |
//获取按钮的父亲的大哥的内容 |
var name = $(btn).parent().siblings().eq(0).html(); |
//获取按钮的父亲的二哥的内容 |
var price = $(btn).parent().siblings().eq(1).html(); |
//创建一个新的行 |
var tr = $('<tr>'+ |
'<td>'+name+'</td>'+ |
'<td>'+price+'</td>'+ |
'<td align="center">'+ |
' <input type="button" value="-" onclick="outcreate(this);"/>'+ |
'<input type="text" size="3" readonly value="1"/>'+ |
'<input type="button" value="+"onclick="increate(this);"/>'+ |
'</td>'+ |
'<td>'+price+'</td>'+ |
'<td align="center"><input type="button" value="x" onclick="rm(this);"/></td>'+ |
'</tr>'); |
//将其追加到tbody之下 |
$("#goods").append(tr); |
sum(); |
} |
//加法 |
function increate(btn){ |
//获取按钮的哥哥的值 |
var n = $(btn).prev().val(); |
//加1后写回 |
$(btn).prev().val(++n); |
//获取按钮的父亲的哥哥的内容 |
var price = $(btn).parent().prev().html(); |
//将金额写入按钮的父亲的弟弟内 |
$(btn).parent().next().html(n*price); |
sum(); |
} |
function outcreate(btn){ |
var n = $(btn).next().val(); |
if(n>=1){ |
|
$(btn).next().val(--n); |
} |
var price = $(btn).parent().prev().html(); |
$(btn).parent().next().html(n*price); |
sum(); |
} |
function rm(btn){ |
$(btn).parent().parent().remove(); |
sum(); |
}; |
function sum(){ |
var ms = $("#goods tr"); |
var num = 0; |
for(var i=0;i<ms.length;i++){ |
var td = ms.eq(i).children().eq(3); |
var m = td.text(); |
num += parseFloat(m); |
} |
$("#total").text(num); |
} |
</script> |
</head> |
<body> |
<h1>真划算</h1> |
<table> |
<tr> |
<th>商品</th> |
<th>单价(元)</th> |
<th>颜色</th> |
<th>库存</th> |
<th>好评率</th> |
<th>操作</th> |
</tr> |
<tr> |
<td>罗技M185鼠标</td> |
<td>80</td> |
<td>黑色</td> |
<td>893</td> |
<td>98%</td> |
<td align="center"> |
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> |
</td> |
</tr> |
<tr> |
<td>微软X470键盘</td> |
<td>150</td> |
<td>黑色</td> |
<td>9028</td> |
<td>96%</td> |
<td align="center"> |
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> |
</td> |
</tr> |
<tr> |
<td>洛克iphone6手机壳</td> |
<td>60</td> |
<td>透明</td> |
<td>672</td> |
<td>99%</td> |
<td align="center"> |
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> |
</td> |
</tr> |
<tr> |
<td>蓝牙耳机</td> |
<td>100</td> |
<td>蓝色</td> |
<td>8937</td> |
<td>95%</td> |
<td align="center"> |
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> |
</td> |
</tr> |
<tr> |
<td>金士顿U盘</td> |
<td>70</td> |
<td>红色</td> |
<td>482</td> |
<td>100%</td> |
<td align="center"> |
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> |
</td> |
</tr> |
</table> |
|
<h1>购物车</h1> |
<table> |
<thead> |
<tr> |
<th>商品</th> |
<th>单价(元)</th> |
<th>数量</th> |
<th>金额(元)</th> |
<th>删除</th> |
</tr> |
</thead> |
<tbody id="goods"> |
|
</tbody> |
<tfoot> |
<tr> |
<td colspan="3" align="right">总计</td> |
<td id="total"></td> |
<td></td> |
</tr> |
</tfoot> |
</table> |
</body> |
</html> |
初级程序员
by: lbq 发表于：2017-09-13 19:20:15 顶(0) | 踩(0) 回复
好厉害
回复评论