这个是JQuery的代码。
<script type="text/javascript">
$(function(){
$("#quantity").keyup(function(){
if(isNaN($(this).val()) || parseInt($(this).val())<1){
$(this).val("1");
$("#totalPrice").html($("#price").val());
return;
}
var total = parseFloat($("#price").val())*parseInt($(this).val());
$("#totalPrice").html(total.toFixed(2));
})
})
/*商品数量+1*/
function numAdd(){
var num_add = parseInt($("#quantity").val())+1;
if($("#quantity").val()==""){
num_add = 1;
}
$("#quantity").val(num_add);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
/*商品数量-1*/
function numDec(){
var num_dec = parseInt($("#quantity").val())-1;
if(num_dec<1){
//购买数量必须大于或等于1
alert("not lt 1");
}else{
$("#quantity").val(num_dec);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
}
</script>
这个是JSP里面的代码
for(int i=0;i<cartquantity;i++)
{
String cartproduct_id=productidlist.get(i).toString();
GetsSingleInfoFromProduct gsifp=new GetsSingleInfoFromProduct();
String cartproduct_name=gsifp.getSingleProductName(cartproduct_id);
String cartproduct_type=gsifp.getSingleProductType(cartproduct_id);
float cartproduct_price=Float.parseFloat(productpricelist.get(i).toString());
%>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" id="tab">
<tr>
<td class="tb2_td2"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><img src="images/<%out.println(cartproduct_id);%>.jpg"/></a></td>
<td class="tb2_td3"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><%out.println(cartproduct_name);%></a></td>
<td class="tb1_td4"><%out.println(cartproduct_type);%></td>
<td class="tb1_td5">
<span id="min" style=" width:20px; height:18px;border:1px solid #ccc;" onclick="numDec()"/>-</span>
<input id="quantity" class="product_quentity" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;"/>
<span id="add" style="width:20px; height:18px;border:1px solid #ccc;" onclick="numAdd()"/>+</span>
</td>
<td class="tb1_td6"><input id="price" class="productprice" style="color:#ff5500;font-size:14px; font-weight:bold;" value="<%=cartproduct_price%>"></td>
<td class="tb1_td7"><a href="#">删除</a></td>
</tr>
</table>
<%} %>
<table cellpadding="0" cellspacing="0" class="gwc_tb3" >
<tr>
<td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;"><%out.print(cartquantity);%></label> 件</td>
<td class="tb3_td3">合计(不含运费):<span>¥</span><span style=" color:#ff5500;"><span id="totalPrice" style="color:#ff5500;font-size:14px; font-weight:bold;"></span></span></td>
<td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;" class="jz2" id="jz2">结算</a></td>
</tr>
</table>
问题是我现在只对查询出的第一条结果有作用,后来想到动态生成的话id重复了,但
使用class去求和的话还是有问题
id不能重复,用样式选择器,然后改为dom关系操作
<table cellpadding="0" cellspacing="0" class="gwc_tb2" id="tab">
<tr>
<td class="tb2_td2"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><img src="images/<%out.println(cartproduct_id);%>.jpg"/></a></td>
<td class="tb2_td3"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><%out.println(cartproduct_name);%></a></td>
<td class="tb1_td4"><%out.println(cartproduct_type);%></td>
<td class="tb1_td5">
<span id="min" style=" width:20px; height:18px;border:1px solid #ccc;" onclick="numDec(this)"/>-</span><!--传入DOM对象--->
<input id="quantity" class="product_quentity" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;"/>
<span id="add" style="width:20px; height:18px;border:1px solid #ccc;" onclick="numAdd(this)"/>+</span><!--传入DOM对象--->
</td
<td class="tb1_td6"><input id="price" class="productprice" style="color:#ff5500;font-size:14px; font-weight:bold;" value="<%=cartproduct_price%>"></td>
<td class="tb1_td7"><a href="#">删除</a></td>
</tr>
</table>
<script type="text/javascript">
$(function () {
$("input.product_quentity").keyup(function () {
var price = $(this).closest('table').find('input.productprice');//同个table的price控件
if (isNaN($(this).val()) || parseInt($(this).val()) < 1) {
$(this).val("1");
$("#totalPrice").html(price.val());
return;
}
var total = parseFloat(price.val()) * parseInt($(this).val());
$("#totalPrice").html(total.toFixed(2));
})
})
/*商品数量+1*/
function numAdd(o) {
var quantity = $(o).closest('table').find('input.product_quentity'), price = $(this).closest('table').find('input.productprice'); ;
var num_add = parseInt(quantity.val()) + 1;
if (quantity.val() == "") {
num_add = 1;
}
quantity.val(num_add);
var total = parseFloat(price.val()) * parseInt(quantity.val());
$("#totalPrice").html(total.toFixed(2));
}
/*商品数量-1*/
function numDec(o) {
var quantity = $(o).closest('table').find('input.product_quentity'), price = $(this).closest('table').find('input.productprice'); ;
var num_dec = parseInt(quantity.val()) - 1;
if (num_dec < 1) {
//购买数量必须大于或等于1
alert("not lt 1");
} else {
quantity.val(num_dec);
var total = parseFloat(price.val()) * parseInt(quantity.val());///////
$("#totalPrice").html(total.toFixed(2));
}
}
</script>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。