现在有一个动态表格,用户可以随意增加删除行(这个功能已经实现),现在的问题是:当这些行都在变化时,如何计算出合计呢?
以下是动态表格程序:
序号
产品名称
规格
材质
单位
数量(台)
标准
备注
1
总计:
-
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
你不是可以取到指定的列吗?根据你第一个图,要求和的列是第七列,数组下标是6。
同时,你不是也可以取到有效的数据行数吗?无论你增加或删除操作,操作结束后的表格都可以映射为一个固定的二维数组,已经可以计算求和了呀,难道是我理解错误。
如果不是准备单独写操作结束后的遍历求和的方法(实际上也没有必要),在你refreshRowNo的方法中已经在做这样的事情了。每当添加完或删除完都会执行刷新行标的动作,这时已经可以取到相应栏位的值,我的思路是将其存入一个全局的数组中,以供后面求和使用。
在复选框选中或取消选中时,删除或保留数组中对应下标的值,最后在对数组的值进行求和,就可以得到你想要的总计数值了吧。
简单的代码是这样:
这样一来,每当你添加或者删除行后刷新行号的同时,将所有行的待计算项存入这个空数组中,然后根据checkbox的勾选情况选择相应的值进行计算。
不知道这个答案是否符合题主所述问题?
原生,硬派!
不急着写代码,先看需求。“行变化时重新计算总和”这个太浅显了,事实上离需求的本质还有点远。这个需求其实暗含了这样一个三段论的分析:
“数据变化”才是这个需求的本质和枢纽。某些事件触发实质数据变化,而无论原因是什么,只要数据变化了就要触发后续的计算动作。
所以这个需求你需要一个事件模型。
事实上大多数浏览器都支持原生的自定义事件系统,但偏偏恨人的是IE任何版本都不支持……
所以这时候就该上jQuery,填平浏览器之间实现不一致的坑:
http://jsfiddle.net/vw66e1v0/
这个实现的关键点在于事件冒泡。数据变化事件的实体只在
<table>上绑定一次,但表格中任意子元素都可以响应数据变化事件。这个响应的原理是:子元素无对应事件的行为时,会将事件逐级上报,最终必然在<table>上统一处理。