| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2197 人关注过本帖
标题:js动态遍历实现购物车的总额,大家来帮我看看
只看楼主 加入收藏
一神经彬
Rank: 1
等 级:新手上路
帖 子:9
专家分:0
注 册:2017-11-1
结帖率:0
收藏
 问题点数:0 回复次数:3 
js动态遍历实现购物车的总额,大家来帮我看看
程序代码:
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>订单管理管理</title>
    <meta name="decorator" content="default"/>
    <script type="text/javascript">
        $(document).ready(function() {
            //$("#name").focus();
            $("#inputForm").validate({
                submitHandler: function(form){
                    loading('正在提交,请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $("#messageBox").text("输入有误,请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
        function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));
            $(list+idx).find("select").each(function(){
                $(this).val($(this).attr("data-value"));
            });
            $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
                var ss = $(this).attr("data-value").split(',');
                for (var i=0; i<ss.length; i++){
                    if($(this).val() == ss[i]){
                        $(this).attr("checked","checked");
                    }
                }
            });
        }
        function delRow(obj, prefix){
            var id = $(prefix+"_id");
            var delFlag = $(prefix+"_delFlag");
            if (id.val() == ""){
                $(obj).parent().parent().remove();
            }else if(delFlag.val() == "0"){
                delFlag.val("1");
                $(obj).html("&divide;").attr("title", "撤销删除");
                $(obj).parent().parent().addClass("error");
            }else if(delFlag.val() == "1"){
                delFlag.val("0");
                $(obj).html("&times;").attr("title", "删除");
                $(obj).parent().parent().removeClass("error");
            }
        }
    </script>
</head>
<body>
<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        <li><a href="${ctx}/orderadmin/orderAdd/">订单管理列表</a></li>
        <li class="active"><a href="${ctx}/orderadmin/orderAdd/form?id=${orderAdd.id}">订单管理<shiro:hasPermission name="orderadmin:orderAdd:edit">${not empty orderAdd.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="orderadmin:orderAdd:edit">查看</shiro:lacksPermission></a></li>
    </ul><br/>
    </div>
    <form:form id="inputForm" modelAttribute="orderAdd" action="${ctx}/orderadmin/orderAdd/save" method="post" class="form-horizontal">
    <div class="box-body" style="margin-right: 50px;">
        <form:hidden path="id"/>
        <sys:message content="${message}"/>       

        <div class="form-group">
            <label class="col-sm-2 control-label">
            订单编号:</label>
            <div class="col-sm-10 controls">
                <form:input path="orderId" htmlEscape="false" maxlength="64" class="form-control " value="${requestScope.orderId}" readonly="true" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            下单时间:</label>
            <div class="col-sm-10 controls">
                <input name="orderTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate " value="${requestScope.orderTime}" readonly="readonly" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            商品总额:</label>
            <div class="col-sm-10 controls">
                <form:input path="comTotal" htmlEscape="false" class="form-control "/>
       

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            支付方式:</label>
            <div class="col-sm-10 controls">
                <form:radiobuttons path="priceMethod" items="${fns:getDictList('price_method')}" itemLabel="label" itemValue="value" htmlEscape="false" class=""/>
       

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            下单用户:</label>
            <div class="col-sm-10 controls">
                <sys:treeselect id="orderUser" name="orderUser" value="${orderAdd.orderUser}" labelName="" labelValue=""
                    title="用户" url="/sys/office/treeData?type=3" cssClass="form-control " allowClear="true" notAllowSelectParent="true"/>
       

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            配送地址:</label>
            <div class="col-sm-10 controls">
                <form:input path="detaAddress" htmlEscape="false" maxlength="300" class="form-control "/>
       

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            联系电话:</label>
            <div class="col-sm-10 controls">
                <form:input path="telephone" htmlEscape="false" maxlength="11" class="form-control "/>
       

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            订单状态:</label>
            <div class="col-sm-10 controls">
                <form:select path="orderState" class="input-medium ">
                    <form:option value="" label=""/>
                    <form:options items="${fns:getDictList('order_state')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                </form:select>
       

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            备注:</label>
            <div class="col-sm-10 controls">
                <form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="64" class="form-control "/>
       

            </div>
        </div>
            <div class="form-group" style="margin-left: 120px;">
                <!-- <label class="control-label">order_info:</label>-->
                <div class="controls">
                    <table id="contentTable" class="table table-striped table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th class="hide"></th>
                                <th>商品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                                <shiro:hasPermission name="orderadmin:orderAdd:edit"><th width="10">操作</th></shiro:hasPermission>
                            </tr>
                        </thead>
                        <tbody id="orderInfoList">
                        </tbody>
                        <shiro:hasPermission name="orderadmin:orderAdd:edit"><tfoot>
                            <tr><td colspan="6"><a href="javascript:" onclick="addRow('#orderInfoList', orderInfoRowIdx, orderInfoTpl);orderInfoRowIdx = orderInfoRowIdx + 1;" class="btn">新增</a></td></tr>
                        </tfoot></shiro:hasPermission>
                    </table>
                    <script type="text/template" id="orderInfoTpl">//<!--
                        <tr id="orderInfoList{{idx}}">
                            <td class="hide">
                                <input id="orderInfoList{{idx}}_id" name="orderInfoList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
                                <input id="orderInfoList{{idx}}_delFlag" name="orderInfoList[{{idx}}].delFlag" type="hidden" value="0"/>
                            </td>
                            <td>
                                <input id="orderInfoList{{idx}}_comName" name="orderInfoList[{{idx}}].comName" type="text" value="{{}}" maxlength="100" class="form-control input-sm "/>
                            </td>
                            <td>
                                <input id="orderInfoList{{idx}}_price" name="orderInfoList[{{idx}}].price" type="text" value="{{row.price}}" class="form-control input-sm "/>
                            </td>
                            <td>
                                <input id="orderInfoList{{idx}}_num" name="orderInfoList[{{idx}}].num" type="text" value="{{row.num}}" maxlength="11" class="form-control input-sm "/>
                            </td>
                            <shiro:hasPermission name="orderadmin:orderAdd:edit"><td class="text-center" width="10">
                                {{#delBtn}}<span class="close" onclick="delRow(this, '#orderInfoList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
                            </td></shiro:hasPermission>
                        </tr>//-->
                    </script>
                    <script type="text/javascript">
                        var orderInfoRowIdx = 0, orderInfoTpl = $("#orderInfoTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                        $(document).ready(function() {
                            var data = ${fns:toJson(orderAdd.orderInfoList)};
                            for (var i=0; i<data.length; i++){
                                addRow('#orderInfoList', orderInfoRowIdx, orderInfoTpl, data[i]);
                                orderInfoRowIdx = orderInfoRowIdx + 1;
                            }
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="form-actions">
            <shiro:hasPermission name="orderadmin:orderAdd:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
            <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
        </div>
    </form:form>
</body>
</html>
搜索更多相关主题的帖子: name form div class label 
2017-11-07 14:45
一神经彬
Rank: 1
等 级:新手上路
帖 子:9
专家分:0
注 册:2017-11-1
收藏
得分:0 
图片附件: 游客没有浏览图片的权限,请 登录注册

点击增就会出现一行空白,然后输入单价和数量,与此同时上面的商品总额会自动统计总额,每点击一下新增就添加一行输入单价数量,然后上面的总额自动统计,请问这个过程如何实现呢?
下面这个就是一个表格,点击新增以后,就append一行,然后输入完成以后调用一个方法,遍历一次这个表格,然后将结果相加,然后赋值到商品总额里面,这过程怎么实现呢?菜鸟求帮助
2017-11-07 14:47
wlrjgzs
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:26
帖 子:212
专家分:1566
注 册:2017-4-10
收藏
得分:0 
你这个问题可不是菜鸟应该问的问题。可以给你解决,需要的话私信我吧。
2017-11-09 11:57
快速回复:js动态遍历实现购物车的总额,大家来帮我看看
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.025128 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved