http://p13.freep.cn/p.aspx?u=v20_p13_photo_1204061857565537_0.jpg希望点击操作,下面的总金额、话费和座机费有变化,不像现在程序里面写的。

解决方案 »

  1.   

    就是显示选中的金额之和对吧,我写了一个例子
    我只写了一计算列,你看明白了,稍微改一点,就能扩展到多列
    为了简洁,我用了jquery<script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
    <table id="table1">
    <tr>
    <th>总金额</th><th>操作<input type="checkbox" id="ckall" /></th>
    </tr>
    <tr><td class="money1" >15.9</td><td><input type="checkbox" class="ck" /></td></tr>
    <tr><td  class="money1" >20.8</td><td><input type="checkbox" class="ck" /></td></tr>
    <tr><td  class="money1" >12.6</td><td><input type="checkbox" class="ck" /></td></tr>
    </table>
    <div>总金额<span id="money1"></span></div>
    <script type="text/javascript" >
        $(".ck").change(function() {
            addmoney();
        });    function addmoney() {
            var money1 = 0;
            $(".ck").each(function() {
                if ($(this)[0].checked) {
                    money1 += +parseFloat($(this).parent().parent().find(".money1").html());
                }
            });
            $("#money1").html(money1.toFixed(2));
        }
        
        
        $("#ckall").change(function() {
          $(".ck").prop("checked", $(this)[0].checked);
          addmoney();
        });
    </script>
      

  2.   

    在客户端做计算有个问题就是JS浮点计算精度问题不好解决。<!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">
    <style>
    *{font-size:10pt}
    .tabl {
           width:600px; height:200px; text-align:center; background:orange;
           border-top:20px solid orange; border-left:20px solid orange;border-right:20px solid orange
    }
    .show {
           width:590px;height:30px;text-align:center;background:orange;border:5px solid orange;line-height: 30px
    }
    </style>
    <script type="text/javascript" src="http://www.bbvdd.com/d/20120407192900b6rql.txt" ></script>
    <script type="text/javascript" >
    $(function() {
        /*
           Import $.addMethod.delegate
           Import $.relPackage.domNode domOption
        */
        $("\
           部门名称, 用户名,   号 码,  国 内, 区 内, 区 间, 座机费, 总金额, 话费年月, 操 作|\
           105室,    初始用户, 2461287, 0,      0.44,   0.9,    0,      1.34,   2011-11,  <input type='checkbox'>|\
           105室,    初始用户, 2461288, 9,      0,      0,      0,      9,      2011-12,  <input type='checkbox'>|\
           105室,    初始用户, 2461289, 3,      1.54,   0.9,    0,      5.44,   2012-01,  <input type='checkbox'>|\
           105室,    初始用户, 2461287, 1.8,    0.22,   0,      0,      2.02,   2012-02,  <input type='checkbox'>\
          ").create("table").attr({className:"tabl", border:"1", id:"Tab"}).end()
            .create("div").attr("className", "show")
            .html("\
                   总金额:<span id='Z'>0</span>元 | \
                   话 费:<span id='X'>0</span>元 | \
                   座机费:<span id='Y'>0</span>元 | \
                   全 选:<input type='checkbox'>   \
                   <input type='button' value='缴 费'>\
                  ").back()
                    .delegate("#input", "click", function(o) {
                         var obj = $(o).parent().parent().child();
                         typeof this["tel"] != "undefined" || (this["tel"] = "");
                         var x = Number($("X").html()), y = Number($("Y").html());
                         if (o.checked) {
                             this["tel"] += obj.eq(2).html() +"|"; 
                             x += Number(obj.back().eq(3).html());
                             x += Number(obj.back().eq(4).html()); 
                             x += Number(obj.back().eq(5).html());
                             y += Number(obj.back().eq(6).html());
                         } else {
                             var reg = new RegExp(obj.eq(2).html());
                             this["tel"] = this["tel"].replace(reg, "");
                             x -= Number(obj.back().eq(3).html());
                             x -= Number(obj.back().eq(4).html());
                             x -= Number(obj.back().eq(5).html());
                             y -= Number(obj.back().eq(6).html());
                         }
                         $("X").html(x), $("Y").html(y), $("Z").html(x + y);
                     }).back()
                       .child()
                       .each(function() {
                            /^checkbox$/i.test(this.type) && $(this).attr("onclick", function() {
                                typeof $("Tab").attr("tel") != "undefined" || $("Tab").attr("tel", "");
                                if (this.checked) { 
                                     var x = 0, y = 0, s = "";
                                     $("Tab").html().replace(/\d{7}[\S\s]*?\d{4}-/g, function($) {
                                         var arr = $.match(/[^>]+(?=<\/)/g);
                                         x += Number(arr[1]) + Number(arr[2]) + Number(arr[3]);
                                         y += Number(arr[4]);
                                         s += arr[0] + "|";
                                     });
                                     $("Tab").attr("tel", s);
                                     $("Tab^input").checked(true);
                                     $("X").html(x), $("Y").html(y), $("Z").html(x + y);
                                } else {
                                     $("Tab").attr("tel", "");
                                     $("Tab^input").checked(false);
                                     $("X").html(0), $("Y").html(0), $("Z").html(0);
                                }
                            });
                            /^button$/i.test(this.type) && $(this).attr("onclick", function() {
                                var url = "serverPath" + "?tel=" + [$("Tab").attr("tel") || ""];
                                url += "&hf=" + $("X").html() + "&zj" + $("Y").html() + "&ze=" + $("Z").html();
                                url = encodeURI(url);
                                alert("请求API:" + url);
                            })
                        })
              
          
    })
    </script>
      

  3.   

    改写了下下,谁能很好的解决JS浮点计算精度问题吗?<!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">
    <style>
    *{font-size:10pt}
    .tabl {
           width:600px; height:200px; text-align:center; background:orange;
           border-top:20px solid orange; border-left:20px solid orange;border-right:20px solid orange
    }
    .show {
           width:590px;height:30px;text-align:center;background:orange;border:5px solid orange;line-height: 30px
    }
    </style>
    <script type="text/javascript" src="http://www.bbvdd.com/d/20120408182249y3srz.txt"></script>
    <script type="text/javascript" >
    $(function() {
        /*
           Import $.addMethod.delegate
           Import $.relPackage.*
        */
        $("\
            部门名称, 用户名,   号 码,  国 内, 区 内, 区 间, 座机费, 总金额, 话费年月, 操 作|\
            105室,    初始用户, 2461287, 0,      0.44,   0.9,    0,      1.34,   2011-11,  <input type='checkbox'>|\
            105室,    初始用户, 2461288, 9,      0,      0,      0,      9,      2011-12,  <input type='checkbox'>|\
            105室,    初始用户, 2461289, 3,      1.54,   0.9,    0,      5.44,   2012-01,  <input type='checkbox'>|\
            105室,    初始用户, 2461287, 1.8,    0.22,   0,      0,      2.02,   2012-02,  <input type='checkbox'>\
         ").create("table").attr({className:"tabl", border:"1", id:"Tab"}) //以上字符串可由后台返回,add Method AJAX异步加载表单。
           .delegate("#input", "click", function(o) {
                var obj = $(o).parent().parent().child();
                typeof this["tel"] != "undefined" || (this["tel"] = "");
                var x = Number($("X").html()), y = Number($("Y").html());
                if (o.checked) {
                    this["tel"] += obj.eq(2).html() +"|"; 
                    x += Number(obj.back().eq(3).html());
                    x += Number(obj.back().eq(4).html()); 
                    x += Number(obj.back().eq(5).html());
                    y += Number(obj.back().eq(6).html());
                } else {
                    var reg = new RegExp(obj.eq(2).html());
                    this["tel"] = this["tel"].replace(reg, "");
                    x -= Number(obj.back().eq(3).html());
                    x -= Number(obj.back().eq(4).html());
                    x -= Number(obj.back().eq(5).html());
                    y -= Number(obj.back().eq(6).html());
                }
                $("X").html(x), $("Y").html(y), $("Z").html(x + y);
              }).end()
                .create("div").attr("className", "show")
                .html("\
                     总金额:<span id='Z'>0</span>元 | \
                     话 费:<span id='X'>0</span>元 | \
                     座机费:<span id='Y'>0</span>元 | \
                     全 选:<input type='checkbox'>   \
                     <input type='button' value='缴 费'>\
                  ").child()
                    .each(function() {
                         /^checkbox$/i.test(this.type) && $(this).attr("onclick", function() {
                             typeof $("Tab").attr("tel") != "undefined" || $("Tab").attr("tel", "");
                             if (this.checked) { 
                                 var x = 0, y = 0, s = "";
                                 $("Tab").html().replace(/\d{7}[\S\s]*?\d{4}-/g, function($) {
                                     var arr = $.match(/[^>]+(?=<\/)/g);
                                     x += Number(arr[1]) + Number(arr[2]) + Number(arr[3]);
                                     y += Number(arr[4]);
                                     s += arr[0] + "|";
                                 });
                                 $("Tab").attr("tel", s);
                                 $("Tab^input").checked(true);
                                 $("X").html(x), $("Y").html(y), $("Z").html(x + y);
                             } else {
                                 $("Tab").attr("tel", "");
                                 $("Tab^input").checked(false);
                                 $("X").html(0), $("Y").html(0), $("Z").html(0);
                             }
                         });
                         /^button$/i.test(this.type) && $(this).attr("onclick", function() {
                             var url = "serverPath" + "?tel=" + [$("Tab").attr("tel") || ""];
                             url += "&hf=" + $("X").html() + "&zj" + $("Y").html() + "&ze=" + $("Z").html();
                             url = encodeURI(url);
                             alert("请求API:" + url)
                         })
                    })
    })
    </script>