javascript - js动态表格计算问题
迷茫
迷茫 2017-04-10 15:27:26
[JavaScript讨论组]

现在有一个动态表格,用户可以随意增加删除行(这个功能已经实现),现在的问题是:当这些行都在变化时,如何计算出合计呢?

以下是动态表格程序:


序号 产品名称 规格 材质 单位 数量(台) 标准 备注
1
总计:

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(2)
黄舟

你不是可以取到指定的列吗?根据你第一个图,要求和的列是第七列,数组下标是6。
同时,你不是也可以取到有效的数据行数吗?无论你增加或删除操作,操作结束后的表格都可以映射为一个固定的二维数组,已经可以计算求和了呀,难道是我理解错误。

如果不是准备单独写操作结束后的遍历求和的方法(实际上也没有必要),在你refreshRowNo的方法中已经在做这样的事情了。每当添加完或删除完都会执行刷新行标的动作,这时已经可以取到相应栏位的值,我的思路是将其存入一个全局的数组中,以供后面求和使用。

在复选框选中或取消选中时,删除或保留数组中对应下标的值,最后在对数组的值进行求和,就可以得到你想要的总计数值了吧。

简单的代码是这样:

var cells; //用于存储每行的数量
//刷新行号
function refreshRowNo(){
        var tbody = $cc("tbody");
        cells = [];
        for (var i =0;i<tbody.rows.length;i++){

        tbody.rows[i].cells[0].innerHTML=i+1;
        cells.push(tbody.rows[i].cells[6].innerHTML);

        }

        var xxx=tbody.rows.length;

      document.getElementById('xh').value=xxx;

    }

    //为你的checkbox点击事件加入这样的处理,我这里写的是jquery的选择方式,仅仅是想表达出这个思想。
    //或者将我的这个思路改成符合你操作逻辑的方法
    function checkClick(obj){
        //之前存下的cells数组中,index和行号的关系是index = rowNo-1,这个没有错对吧
        //所以这里根据行号获取到下标
        var index = parseInt($(obj).parent().prev('td').html())-1;

        if($(obj).prop("checked")){
            //原来没选中,现在选中的情况,需要计算入总计
            sum(index);
        }else{
            //原来选中,现在取消选中的情况,需要从总计中减掉
            minus(index);
        }
    }

    function sum(index){
        //总计那一行既然是固定的,给目标栏位加上ID应该更好操作些
        var sum = parseInt($("#sum").html()==""?"0":$("#sum").html());  //当前的总和,没有则为0
        sum += parseInt(cells[index]);
        $("#sum").html(sum); 
    }

    function minus(index){
     //总计那一行既然是固定的,给目标栏位加上ID应该更好操作些
        var sum = parseInt($("#sum").html()==""?"0":$("#sum").html());  //当前的总和,没有则为0
        sum -= parseInt(cells[index]);
        $("#sum").html(sum); 
    }

这样一来,每当你添加或者删除行后刷新行号的同时,将所有行的待计算项存入这个空数组中,然后根据checkbox的勾选情况选择相应的值进行计算。

不知道这个答案是否符合题主所述问题?

天蓬老师

原生,硬派!

不急着写代码,先看需求。“行变化时重新计算总和”这个太浅显了,事实上离需求的本质还有点远。这个需求其实暗含了这样一个三段论的分析:

  1. 表格的行增删会引发数据变化
  2. 单元格内输入了合法内容都会引发数据变化
  3. 数据变化时,需要重复计算并更新总和。

“数据变化”才是这个需求的本质和枢纽。某些事件触发实质数据变化,而无论原因是什么,只要数据变化了就要触发后续的计算动作。

所以这个需求你需要一个事件模型


事实上大多数浏览器都支持原生的自定义事件系统,但偏偏恨人的是IE任何版本都不支持……

所以这时候就该上jQuery,填平浏览器之间实现不一致的坑:

http://jsfiddle.net/vw66e1v0/

这个实现的关键点在于事件冒泡。数据变化事件的实体只在<table>上绑定一次,但表格中任意子元素都可以响应数据变化事件。这个响应的原理是:子元素无对应事件的行为时,会将事件逐级上报,最终必然在<table>上统一处理。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号