开发者社区> 问答> 正文

面积*(数量+价格+重量)=小计 怎么用jQuery实现

screenshot
如图片一样 面积*(数量+价格+重量)=小计
完了俩个小计相加等于总和
求求大神们帮帮我 帮我用jQuery写一下 ?

 <body>
总和:<input type="text" id="total" readonly="readonly" />
<table id="panel">
    <tr>
        <td>面积:</td>
        <td><input id="area" type="text" class="price" value="16.2"/></td>
        <td>*(数量:</td>
        <td><input id="num" type="text" class="num" /></td>
        <td>+价格:</td>
        <td><input id="price" type="text" class="numm" /></td>
        <td>+重量:</td>
        <td><input id="weight" type="text" class="numm" onblur="getTotal();"/>)</td>
    </tr>
    <tr>
        <td>小计:</td>
        <td><input id="subtotal" type="text" class="subtotal" /></td>
    </tr>
    <tr>
        <td>面积:</td>
        <td><input id="area" type="text" class="price" value="16.2"/></td>
        <td>*(数量:</td>
        <td><input id="num" type="text" class="num" /></td>
        <td>+价格:</td>
        <td><input id="price" type="text" class="numm" /></td>
        <td>+重量:</td>
        <td><input id="weight" type="text" class="numm" onblur="getTotal();"/>)</td>
    </tr>
    <tr>
        <td>小计:</td>
        <td><input id="subtotal" type="text" class="subtotal" /></td>
    </tr>
</table>
</body>

展开
收起
蛮大人123 2016-03-24 15:34:10 2439 0
1 条回答
写回答
取消 提交回答
  • 我说我不帅他们就打我,还说我虚伪
    
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            $('#panel tr:even input').blur(function () {
                var total = 0, sum = 0,ipts;
                $('#panel tr:even').each(function () {
                    ipts = $(this).closest('tr').find('input');
                    var a = parseFloat(ipts.eq(0).val()) || 0, n = parseFloat(ipts.eq(1).val()) || 0, p = parseFloat(ipts.eq(2).val()) || 0, w = parseFloat(ipts.eq(3).val()) || 0;
                    sum = a * (n + p + w);
                    $(this).closest('tr').next().find('input').val(sum.toFixed(2));//保留2位小数
                    total += sum;
                });
                $('#total').val(total.toFixed(2));
            });
        })
    </script>
        总和:<input type="text" id="total" readonly="readonly" />
        <table id="panel">
            <tr>
                <td>面积:</td>
                <td><input id="area" type="text" class="price" value="16.2" /></td>
                <td>*(数量:</td>
                <td><input id="num" type="text" class="num" /></td>
                <td>+价格:</td>
                <td><input id="price" type="text" class="numm" /></td>
                <td>+重量:</td>
                <td><input id="weight" type="text" class="numm" />)</td>
            </tr>
            <tr>
                <td>小计:</td>
                <td><input id="subtotal" type="text" class="subtotal" /></td>
            </tr>
            <tr>
                <td>面积:</td>
                <td><input id="area" type="text" class="price" value="16.2" /></td>
                <td>*(数量:</td>
                <td><input id="num" type="text" class="num" /></td>
                <td>+价格:</td>
                <td><input id="price" type="text" class="numm" /></td>
                <td>+重量:</td>
                <td><input id="weight" type="text" class="numm" />)</td>
            </tr>
            <tr>
                <td>小计:</td>
                <td><input id="subtotal" type="text" class="subtotal" /></td>
            </tr>
        </table>
    2019-07-17 19:12:51
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载