Home >Backend Development >PHP Tutorial >javascript - 关于数据统计方法,jQuery,急在线等。
网页中生成了一个类似
<code><table> <tr> <td>商品名称</td> <td> </td> <td>数量</td> <td> </td> <td>事件</td> <td> </td> </tr> <tr> <td>商品名称</td> <td> </td> <td>数量</td> <td> </td> <td>事件</td> <td> </td> </tr> <tr> <td>商品名称</td> <td> </td> <td>数量</td> <td> </td> <td>事件</td> <td> </td> </tr> ... </table></code>
情况:
1.商品名称有很多种,其中会有一些是相同的
2.每个商品下都有一个事件,事件可能会不相同
需求:
我需要做一个统计表,相同的商品名的商品整合在一起,并且根据不的事件进行分类,再统计整合后的不同事件的商品数量。
例子:
<code><table> <tr> <td>飞机</td> <td> </td> <td>1</td> <td> </td> <td>损坏</td> <td> </td> </tr> <tr> <td>坦克</td> <td> </td> <td>2</td> <td> </td> <td>维修</td> <td> </td> </tr> <tr> <td>飞机</td> <td> </td> <td>2</td> <td> </td> <td>维修</td> <td> </td> </tr> <tr> <td>飞机</td> <td> </td> <td>3</td> <td> </td> <td>损坏</td> <td> </td> </tr> </table></code>
示例需求效果
<code>飞机共6架,损坏4架,维修2架 坦克共2架,维修2架 </code>
现有数据
<code>$('#tbody tr').each(function(index) { });</code>
网页中生成了一个类似
<code><table> <tr> <td>商品名称</td> <td> </td> <td>数量</td> <td> </td> <td>事件</td> <td> </td> </tr> <tr> <td>商品名称</td> <td> </td> <td>数量</td> <td> </td> <td>事件</td> <td> </td> </tr> <tr> <td>商品名称</td> <td> </td> <td>数量</td> <td> </td> <td>事件</td> <td> </td> </tr> ... </table></code>
情况:
1.商品名称有很多种,其中会有一些是相同的
2.每个商品下都有一个事件,事件可能会不相同
需求:
我需要做一个统计表,相同的商品名的商品整合在一起,并且根据不的事件进行分类,再统计整合后的不同事件的商品数量。
例子:
<code><table> <tr> <td>飞机</td> <td> </td> <td>1</td> <td> </td> <td>损坏</td> <td> </td> </tr> <tr> <td>坦克</td> <td> </td> <td>2</td> <td> </td> <td>维修</td> <td> </td> </tr> <tr> <td>飞机</td> <td> </td> <td>2</td> <td> </td> <td>维修</td> <td> </td> </tr> <tr> <td>飞机</td> <td> </td> <td>3</td> <td> </td> <td>损坏</td> <td> </td> </tr> </table></code>
示例需求效果
<code>飞机共6架,损坏4架,维修2架 坦克共2架,维修2架 </code>
现有数据
<code>$('#tbody tr').each(function(index) { });</code>
<code>//定义存放统计结果的对象 //JS的对象你可将其理解成为一个Hash数据结构 //最后的数据结构为 //{ // '产品key1':{ // prod:'产品名1', // event:{ // ‘事件类型Key1’:{type:'事件类型1',count:事件数量}, // ‘事件类型Key2’:{type:'事件类型2',count:事件数量} // } // }, // '产品key2':{ // prod:'产品名2', // event:{ // ‘事件类型Key3’:{type:'事件类型3',count:事件数量}, // ‘事件类型Key4’:{type:'事件类型4',count:事件数量} // } // }, // ... // } var result={}; var fieldMapping=['prod','count','eventType']; $('tbody tr').each(function(index,item) { //定义存放一行数据的对象 var lineData={}; //查找tr下的所有td元素,对其遍历 $(item).find('td').each(function(index,item){ //读取td元素下的文本内容 var value=$(item).text(); //fieldMapping[index] 按位置读取定义的属性名,并将读取的内容赋给lineData //第1个td为产品名,第2个td为数量,第3个为事件类型 lineData[fieldMapping[index]]=value; }); //获取整理行数据后,对其进行统计处理 processRow(lineData); }); //处理获取到的一行数据,按产品,及事件类型统计 function processRow(lineData){ //判断result对象中是否有 某个产品的属性,如果不存在,那么创建这个属性 //并将一个统计对象赋值给这个属性 if(!result[lineData.prod]){ result[lineData.prod]={ prod: lineData.prod, event:{} }; } //读取event对象下的特定类型的属性数据 var event=result[lineData.prod]['event'][lineData.eventType]; //如果这个事件类型不存在,那么添加事件类型,并设置数量为0 if(!event){ event={ type: lineData.eventType, count:0 }; result[lineData.prod]['event'][lineData.eventType]=event; } //将当前行数据中的事件数量信息累加到事件数量统计对象上 event.count=parseInt(lineData.count)+event.count; } console.log(result);</code>
运行的结果如下图所示: