Home > Backend Development > PHP Tutorial > javascript - 关于数据统计方法,jQuery,急在线等。

javascript - 关于数据统计方法,jQuery,急在线等。

WBOY
Release: 2016-06-06 20:24:00
Original
1415 people have browsed it

网页中生成了一个类似

<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>
Copy after login
Copy after login

情况:
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>
Copy after login
Copy after login

示例需求效果

<code>飞机共6架,损坏4架,维修2架
坦克共2架,维修2架
</code>
Copy after login
Copy after login

现有数据

<code>$('#tbody tr').each(function(index) {

});</code>
Copy after login
Copy after login

回复内容:

网页中生成了一个类似

<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>
Copy after login
Copy after login

情况:
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>
Copy after login
Copy after login

示例需求效果

<code>飞机共6架,损坏4架,维修2架
坦克共2架,维修2架
</code>
Copy after login
Copy after login

现有数据

<code>$('#tbody tr').each(function(index) {

});</code>
Copy after login
Copy after login

<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>
Copy after login

运行的结果如下图所示:

javascript - 关于数据统计方法,jQuery,急在线等。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template