设为首页 | 加入收藏哈喽首页 | 交流分享 | 阅读空间 | 常用工具 | 热点新闻 | 分类信息 | 在线名片 | 友链平台 | 免费资源
单片机 | C/C#/C++ | Java开发 | Flash/动画 | JQuery | 营销 | HTML5+CSS3 | APP | IOS | 健康养生 | 电脑知识 | 娱乐 | 情感 | 搞笑 | 人生感悟 | Android | 搜索/优化 | 考试认证 | 开发技术 | 网络技术 | 硬件 | 软件 | IT/数码 | 生活 | 资讯 | 职场 | 创业 | 数据库 | 服务器 | html+div+css | Windows | Linux | Javascript | .NET | JSP | PHP | ASP | 全部
【发表主题】 【回复主题】 当前:哈喽吧 > 交流分享 > JQuery分享 > 主题查看

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

楼主发布者:匿名     发表时间:2017-02-03 22:51:57
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实现点出或滑过改变背景颜色 下一篇:没有了!
   
回复主题:
回复内容:
匿名回复    建议登录后再回复,如您还不是本站会员请先〖注册〗 |   用户名  密码