请高手帮忙写一个统计金额的效果

金额统计

解决方案 »

  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=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var i = 0;
    $('#btn_zj').click(function(){ i +=1;
    $('#hj').before('<tr><td>'+(i+1)+'</td><td><input type="text"  name="info['+i+'][project]" class="H_cc_input_set"  /></td><td><input type="text"  name="info['+i+'][summary]" class="H_cc_input_set"  /></td><td><input type="text"  name="info['+i+'][price]" class="H_cc_input_set money_price_to" onkeyup=\'money_tongji(this)\'  /></td><td><input type="text"  name="info['+i+'][re]" class="H_cc_input_set" /></td><td><a class="del" href="javascript:" title="删除"></a></td></tr>');
    delTr();
    })
    delTr();
    $('input[name$="[price]"]').keyup=money_tongji;})
    function money_tongji()
    {
    var sum=0;
    $('input[name$="[price]"]').each(function(index, element) {
            sum+=parseFloat($(this).val())||0;
        });
    $(".total_money").html(sum);
    }
    function delTr(){
    $(".del").click(function(){
    $(this).parent().parent().remove();
    })
    }
    </script>
    <style type="text/css">
    html, body { margin: 0; padding: 0; background-attachment:fixed;}
    html{_background-image:url(about:blank);_background-attachment:fixed;}/* 修正IE6振动bug */
    h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, section {  border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
    h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, caption, tbody, tfoot, section , p{ margin:0;padding: 0;}
    table { border-collapse: collapse; border-spacing: 0; }
    img{border:0}
    ol, ul { list-style: none; }
    ul{ display:inline-block;}
    body { width: 100%;margin: 0 auto;font: normal 12px/18px 'Microsoft YaHei','微软雅黑', arial, sans-serif; text-shadow: 0 0 1px rgba(0,0,0,0.01); color: #555; background:#ECF0F1}
    h4 {font-weight: bold; color: #222;font-size: 15px; }
    a {color: #003288;text-decoration: none; font-weight:normal;font-size: 12px; }
    a{hide-focus: expression( this.hideFocus=true ); outline: none;}
    a:hover { text-decoration:none; }
    input::-ms-clear{display:none}    /*解决IE10 默认的input 出现XX的问题*/.lizhi_adddel{ margin-left:6px; overflow:auto;}
    .addlizhi_ry{ background:#E4E9EF;margin-bottom: 10px;}
    .addlizhi_ry th{ height:35px; line-height:35px; color:#3d588f;text-align: center;border-right: 1px solid #fff;white-space: nowrap; padding:0 5px;}
    .addlizhi_ry td{ text-align:center; border-bottom:1px solid #F2F6F7;border-right: 1px solid #fff; height:33px; line-height:33px; padding:0 5px;white-space: nowrap;}
    .lizhi_adddel a{display: inline-block;width: 107px;height: 35px; text-indent:-9999px;background:url("http://my.oa.com/Public/images/all_btn.png") no-repeat;}
    .lizhi_adddel .addline{ background-position:-387px -130px;}
    .lizhi_adddel .delline{ background-position:-499px -131px;}
    .H_zichan_ck_form{ overflow:auto; overflow-y:hidden; +overflow-x:scroll;}
    .H_zichan_ck_form table{ width:99.9%;}
    .H_zichanchuku_form{ width:100%; overflow:auto;}
    .click_btn .btn_an span,a.btn_an span{ width:3px; background:url(http://my.oa.com/Public/images/ico.gif) 0px -95px no-repeat; height:34px; padding-left:5px; float:left; margin-left:-3px;}
    .H_zichanchuku_form select{ width:100px; padding: 3px;margin-left: 5px;background: #F1F1F1;border: 1px solid #9C9C9C;} 
    .H_zichanchuku_form td{ padding:0 5px;}
    .click_btn .btn_an,a.btn_an{ display:inline-block; background:url("http://my.oa.com/Public/images/ico.gif") right -131px no-repeat; padding-right:12px; text-align:center; line-height:34px; color:#474b4e; font-size:14px; height:34px; margin-left:8px;}
    .click_btn .btn_an:Hover,a.btn_an:Hover{ text-decoration:none;}
    .oa_list_tab a{width: 24px;height: 24px;margin:0 1px;white-space:nowrap;display:inline-block;text-decoration: none;background: url("http://my.oa.com/Public/images/all_btn.png") no-repeat; font-size:0px; line-height:0px;}
    .oa_list_tab .edit{ background-position:0px -35px;}
    .oa_list_tab .del{ background-position:-29px -9px;}
    </style>
    </head>
    <body>
    <h2 style="font-size:20px;">请大神帮忙实现 <span style="color:red">金额</span> 那一栏的统计  当输入金额input框的时候进行统计总金额  <br />初始化 是有一行tr的 当点击增加一行的时候 在金额的第二列 输入数字 后进行累加 把总金额 直接显示出来<br />当增加几行 就进行累加几行 算出总金额</h2><div class="H_zichan_ck_form">   
        <table width="100%" cellspacing="0" cellpadding="0" border="0" class="addlizhi_ry oa_list_tab H_Tab_lim_input">
          <tbody><tr bgcolor="#D8DADD">
            <th>序号</th>
            <th>费用项目</th>
            <th>内容摘要</th>
            <th>金额</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
          <tr>
              <td>1</td>
              <td><input type="text" name="info[0][project]" class="H_cc_input_set"></td>
              <td><input type="text" name="info[0][summary]" class="H_cc_input_set"></td>
              <td><input type="text" name="info[0][price]" class="H_cc_input_set money_price_to" onkeyup="money_tongji(this)"></td>
              <td><input type="text" name="info[0][re]" class="H_cc_input_set"></td>
              <td><a class="del" href="javascript:" title="删除"></a></td>
          </tr>
          <tr id="hj">
              <td>费用合计</td>
              <td></td>
              <td></td>
              <td><span style="color:red">总计:</span><span class="total_money"></span></td>
              <td></td>
              <td></td>
          </tr>
        </tbody></table>
    </div>
    <a href="javascript:" id="btn_zj" class="btn_an"><span></span><i class="btn_lzengjia"></i>增加一行</a>
    </body>
    </html>
      

  2.   

    function money_tongji(obj){
      var thisVal = $.trim($(obj).val());
      thisVal = isNaN(thisVal) ||  thisVal == '' ? 0 : parseFloat(thisVal);
      
      var otherPr = $(":input.money_price_to").not($(obj));
      if(otherPr.length > 1){
        for (var i = 0; i < otherPr.length; i++) {
          var oVal = isNaN($(otherPr[i]).val()) ||  $(otherPr[i]).val() == ''? 0 : parseFloat($(otherPr[i]).val());
          thisVal  +=  oVal ;    };
      }
      //console.log(thisVal,$('#hj').find('.total_money'))
      $('#hj').find('.total_money').html(thisVal);
    }
      

  3.   

    你应该学会举一反三，在删除的时候，再次调用一下统计方法即可
    <!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=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var i = 0;
    $('#btn_zj').click(function(){ i +=1;
    $('#hj').before('<tr><td>'+(i+1)+'</td><td><input type="text"  name="info['+i+'][project]" class="H_cc_input_set"  /></td><td><input type="text"  name="info['+i+'][summary]" class="H_cc_input_set"  /></td><td><input type="text"  name="info['+i+'][price]" class="H_cc_input_set money_price_to" onkeyup=\'money_tongji(this)\'  /></td><td><input type="text"  name="info['+i+'][re]" class="H_cc_input_set" /></td><td><a class="del" href="javascript:" title="删除">删除</a></td></tr>');
    delTr();
    })
    delTr();
    $('input[name$="[price]"]').keyup=money_tongji;})
    function money_tongji()
    {
    var sum=0;
    $('input[name$="[price]"]').each(function(index, element) {
            sum+=parseFloat($(this).val())||0;
        });
    $(".total_money").html(sum);
    }
    function delTr(){
    $(".del").click(function(){
    $(this).parent().parent().remove();
    money_tongji();
    })
    }
    </script>
    <style type="text/css">
    html, body { margin: 0; padding: 0; background-attachment:fixed;}
    html{_background-image:url(about:blank);_background-attachment:fixed;}/* 修正IE6振动bug */
    h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, section {  border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
    h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, caption, tbody, tfoot, section , p{ margin:0;padding: 0;}
    table { border-collapse: collapse; border-spacing: 0; }
    img{border:0}
    ol, ul { list-style: none; }
    ul{ display:inline-block;}
    body { width: 100%;margin: 0 auto;font: normal 12px/18px 'Microsoft YaHei','微软雅黑', arial, sans-serif; text-shadow: 0 0 1px rgba(0,0,0,0.01); color: #555; background:#ECF0F1}
    h4 {font-weight: bold; color: #222;font-size: 15px; }
    a {color: #003288;text-decoration: none; font-weight:normal;font-size: 12px; }
    a{hide-focus: expression( this.hideFocus=true ); outline: none;}
    a:hover { text-decoration:none; }
    input::-ms-clear{display:none}    /*解决IE10 默认的input 出现XX的问题*/.lizhi_adddel{ margin-left:6px; overflow:auto;}
    .addlizhi_ry{ background:#E4E9EF;margin-bottom: 10px;}
    .addlizhi_ry th{ height:35px; line-height:35px; color:#3d588f;text-align: center;border-right: 1px solid #fff;white-space: nowrap; padding:0 5px;}
    .addlizhi_ry td{ text-align:center; border-bottom:1px solid #F2F6F7;border-right: 1px solid #fff; height:33px; line-height:33px; padding:0 5px;white-space: nowrap;}
    .lizhi_adddel a{display: inline-block;width: 107px;height: 35px; text-indent:-9999px;background:url("http://my.oa.com/Public/images/all_btn.png") no-repeat;}
    .lizhi_adddel .addline{ background-position:-387px -130px;}
    .lizhi_adddel .delline{ background-position:-499px -131px;}
    .H_zichan_ck_form{ overflow:auto; overflow-y:hidden; +overflow-x:scroll;}
    .H_zichan_ck_form table{ width:99.9%;}
    .H_zichanchuku_form{ width:100%; overflow:auto;}
    .click_btn .btn_an span,a.btn_an span{ width:3px; background:url(http://my.oa.com/Public/images/ico.gif) 0px -95px no-repeat; height:34px; padding-left:5px; float:left; margin-left:-3px;}
    .H_zichanchuku_form select{ width:100px; padding: 3px;margin-left: 5px;background: #F1F1F1;border: 1px solid #9C9C9C;} 
    .H_zichanchuku_form td{ padding:0 5px;}
    .click_btn .btn_an,a.btn_an{ display:inline-block; background:url("http://my.oa.com/Public/images/ico.gif") right -131px no-repeat; padding-right:12px; text-align:center; line-height:34px; color:#474b4e; font-size:14px; height:34px; margin-left:8px;}
    .click_btn .btn_an:Hover,a.btn_an:Hover{ text-decoration:none;}
    .oa_list_tab a{width: 24px;height: 24px;margin:0 1px;white-space:nowrap;display:inline-block;text-decoration: none;background: url("http://my.oa.com/Public/images/all_btn.png") no-repeat; font-size:0px; line-height:0px;}
    .oa_list_tab .edit{ background-position:0px -35px;}
    .oa_list_tab .del{ background-position:-29px -9px;}
    </style>
    </head>
    <body>
    <h2 style="font-size:20px;">请大神帮忙实现 <span style="color:red">金额</span> 那一栏的统计  当输入金额input框的时候进行统计总金额  <br />初始化 是有一行tr的 当点击增加一行的时候 在金额的第二列 输入数字 后进行累加 把总金额 直接显示出来<br />当增加几行 就进行累加几行 算出总金额</h2><div class="H_zichan_ck_form">   
        <table width="100%" cellspacing="0" cellpadding="0" border="0" class="addlizhi_ry oa_list_tab H_Tab_lim_input">
          <tbody><tr bgcolor="#D8DADD">
            <th>序号</th>
            <th>费用项目</th>
            <th>内容摘要</th>
            <th>金额</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
          <tr>
              <td>1</td>
              <td><input type="text" name="info[0][project]" class="H_cc_input_set"></td>
              <td><input type="text" name="info[0][summary]" class="H_cc_input_set"></td>
              <td><input type="text" name="info[0][price]" class="H_cc_input_set money_price_to" onkeyup="money_tongji(this)"></td>
              <td><input type="text" name="info[0][re]" class="H_cc_input_set"></td>
              <td><a class="del" href="javascript:" title="删除"></a></td>
          </tr>
          <tr id="hj">
              <td>费用合计</td>
              <td></td>
              <td></td>
              <td><span style="color:red">总计:</span><span class="total_money"></span></td>
              <td></td>
              <td></td>
          </tr>
        </tbody></table>
    </div>
    <a href="javascript:" id="btn_zj" class="btn_an"><span></span><i class="btn_lzengjia"></i>增加一行</a>
    </body>
    </html>