jquery动态添加/删除元素及可以计算总合(类似购物车)

JQuery 1534 0 2017-02-03

jquery动态添加/删除元素及可以计算总合(类似购物车)
HTML代码:
<div id="boxs" style="padding:10px 0px 0px 30px">
        <p class="adds" id="first">(1)
          商品:<input name="j_describe[]" type="text" size="20" >
          &nbsp;&nbsp;
          单位:<input name="j_unit[]" type="text" size="2" >
          &nbsp;&nbsp;
          数量:<input type="text" name="j_num[]" class="nums" lay-verify="required"  size="2" onBlur="total(this)" >
          &nbsp;&nbsp;
          单价:<input type="text" name="j_price[]" class="prices" lay-verify="required" size="2" onBlur="total(this)" >元
          &nbsp;&nbsp;
          金额:<input type="text" name="j_total[]" class="totals" lay-verify="required" size="6" onBlur="total(this)" style="color:#F00" >元
          &nbsp;&nbsp;
          备注:<input name="j_remark[]" type="text" size="20">
        </p>
        <p class="adds" id="two">(2)
          商品:<input name="j_describe[]" type="text" size="20" >
          &nbsp;&nbsp;
          单位:<input name="j_unit[]" type="text" size="2" >
          &nbsp;&nbsp;
          数量:<input type="text" name="j_num[]" class="nums" lay-verify="required"  size="2" onBlur="total(this)" >
          &nbsp;&nbsp;
          单价:<input type="text" name="j_price[]" class="prices" lay-verify="required" size="2" onBlur="total(this)" >元
          &nbsp;&nbsp;
          金额:<input type="text" name="j_total[]" class="totals" lay-verify="required" size="6" onBlur="total(this)" style="color:#F00" >元
          &nbsp;&nbsp;
          备注:<input name="j_remark[]" type="text" size="20">
        </p>
        </div>

<a href="#none" id="xin-add">【添加】</a>

JS代码:
//添加条数
$('#xin-add').click(function(){
var num=$('#boxs').children('.adds').length;
var htmls=$('#first').html(); htmls=htmls.replace('(1)','('+(num+1)+')');
$('#boxs').append('<p class="adds">'+htmls+'&nbsp;&nbsp;<a href="#none" onclick="delP(this)">×</a></p>');
});
//删除条数
function delP(obj){$(obj).parent('p').remove();}
//计算总和
function total(obj){var t=$(obj).parent(); var num=t.find('input[class*=nums]').val(); var price=t.find('input[class*=prices]').val(); var total=t.find('input[class*=totals]').val(); if(isNaN(num)){t.find('input[class*=nums]').val(0);} if(isNaN(price)){t.find('input[class*=prices]').val(0);} if(isNaN(total)){t.find('input[class*=totals]').val(0);} var totalSum=t.find('input[class*=nums]').val() * t.find('input[class*=prices]').val(); t.find('input[class*=totals]').val(totalSum.toFixed(2));}

上一篇:jquery实现点出或滑过改变背景颜色

下一篇:如何自己自定义编写jquery插件,网上收集供学习参考

讨论数量:0

请先登录再发表讨论。 2024-03-28

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链