jquery关于金额计算的问题

改了下你的结构，方便操作。。自己研究下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript -TAG---and---焦点图-</title>
<style type="text/css">
body{ padding: 0; margin: 0;}
body{ font-size: 12px; font-family: "微软雅黑";}
ul,ol{ margin: 0px; padding: 0; list-style: none;}
h2{ padding-left: 20px;}
a{ text-decoration: none;}
/*CSS*/
.oa_extra_work .table_extra_work{ width:70%; border: 1px solid #ccc;}
.table_extra_work tr th{white-space:nowrap; padding: 0 5px;}
.table_extra_work tr th,.table_extra_work tr td{ text-align: center; border: 1px solid #ccc;}
.table_extra_work tr td{white-space: nowrap;padding: 0 5px;}
.table_extra_work tr td    .extra_work,.table_extra_work tr td    .chalv_work,.table_extra_work tr td    .lixiang_work{width: 120px;border: 0 none; text-align: center;}
.table_extra_work tr td    .countTime,.table_extra_work tr td    .timeD{ width: 80px;}
.table_extra_work tr td    .shiyou{ width:99%; min-width:400px;+width:400px;} ;
.table_extra_work tr td    .timeD{}
.table_extra_work tr td    .del,.table_extra_work tr td .nodel{width: 50px;height: 25px;line-height: 25px; color: #fff;background: #27A9E3;display: block;margin: 0 auto;text-align: center;}
.table_extra_work tr td .nodel{background:none;}
.table_extra_work tr td .work_td_shiyou{display: block;width: 450px;height: 29px;line-height: 29px;overflow: auto;white-space: normal;}
.extra_work_addLine,.layout_right_main .addLinesq{ border: 0 none; height: 29px; line-height: 29px; cursor: pointer; background: #27A9E3; color: #fff; margin-left: 0px; margin-top: 10px;}
.zhuming{padding: 10px 0; font-size: 13px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function OnInput(e) {
        var tbody = $(e.target || e.srcElement).closest('tbody'), sum = 0;
        tbody.find('input').each(function () { sum += parseFloat(this.value) || 0 });
        tbody.find('td:last span').html(sum.toFixed(2));
        sum = 0;
        $('#J_Lx_table span.xiaoji').each(function () { sum += parseFloat(this.innerHTML) || 0; });
        $('#tdTotal').html(sum.toFixed(2));
    }
    $(function () {
        //TODO 培训项目立项申请
        var curLxIndex = 0;
        $(document).on("click", "#J_lixiang_addLine", function () {
            curLxIndex++;
            var LxStr = '<tbody><tr height="32" class="num_' + curLxIndex + '"><th>场次</th><th>交通费（元）</th><th>住宿费（元）</th><th>餐费</th><th>物料费</th><th>操作</th></tr>';
            LxStr += '<tr height="29" class="num_' + curLxIndex + '"><td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>';
            LxStr += '<td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>';
            LxStr += '<td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>';
            LxStr += '<td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(this)" /></td>';
            LxStr += '<td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event);" /></td>';
            LxStr += '<td rowspan="3"><a href="javascript:;" class="del">删除</a></td></tr>';
            LxStr += '<tr height="32" class="num_' + curLxIndex + '"><th>课酬费</th><th>培训手册费</th><th>场地费</th><th>其他费用</th><th>合计</th></tr>';
            LxStr += '<tr height="29" class="num_' + curLxIndex + '"><td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>';
            LxStr += '<td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>';
            LxStr += '<td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>';
            LxStr += '<td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>';
            LxStr += '<td width="5%"><span class="xiaoji">123</span></td>';
            LxStr += '</tr></tbody>';
            //填充
            $("#tbTotal").before(LxStr);        })        //TODO 培训项目立项申请删除效果
        $(document).on("click", "#J_Lx_table a.del", function () {
            var _this = $(this);
            //获取当前点击的 class
            var curClass = _this.closest("tr").attr("class");
            _this.closest("table").find("." + curClass).remove();        })
    })
</script>

</head>

<body>
    
        <div class="oa_extra_work pl10">
            <table border="0" style="width: 800px;margin-left: 110px;;" class="table_extra_work" id="J_Lx_table" cellpadding="0" cellspacing="0"><tbody>
                <tr height="32" class="num_0"><th>场次</th><th>交通费（元）</th><th>住宿费（元）</th><th>餐费</th><th>物料费</th><th>操作</th></tr>
                <tr height="29" class="num_0">
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(this)" /></td>
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event);" /></td>
                    <td rowspan="3"><a href="javascript:;" class="del">删除</a></td>
                </tr>
                <tr height="32" class="num_0"><th>课酬费</th><th>培训手册费</th><th>场地费</th><th>其他费用</th><th>合计</th></tr>
                <tr height="29" class="num_0">
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>
                    <td width="5%"><input type="text" class="lixiang_work" name="" value="" onkeyup="OnInput(event)" /></td>
                    <td width="5%"><span class="xiaoji">123</span></td>
                </tr></tbody>
                 <tbody id="tbTotal">
                <tr height="29" id="J_Lx_Total"><td>合计金额（小写）：</td><td id="tdTotal">12352.04</td><td>合计金额（大写）：</td><td colspan="3"><span>壹万贰仟叁佰伍拾贰圆零肆分</span></td></tr></tbody>
            </table>
            <input type="button" value="新增一行" class="extra_work_addLine clearfix" id="J_lixiang_addLine" style="margin-left: 110px; margin-bottom: 10px;" />
        </div>
        

</body>
</html>

调试易

jquery关于金额计算的问题

解决方案 »