解决方案 »

  1. 改了下你的结构,方便操作。。自己研究下<!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>
        <!--table-->
            <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>
            <!--table  end-->
     
    </body>
    </html>
      

类似问题 »