ホームページ >バックエンド開発 >PHPチュートリアル >javascript - 关于数据统计方法,jQuery,急在线等。

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

WBOY
WBOYオリジナル
2016-06-06 20:24:001413ブラウズ

网页中生成了一个类似

<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>

运行的结果如下图所示:

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。