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

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

WBOY
Freigeben: 2016-06-06 20:24:00
Original
1416 Leute haben es durchsucht

网页中生成了一个类似

<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>
Nach dem Login kopieren
Nach dem Login kopieren

情况:
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>
Nach dem Login kopieren
Nach dem Login kopieren

示例需求效果

<code>飞机共6架,损坏4架,维修2架
坦克共2架,维修2架
</code>
Nach dem Login kopieren
Nach dem Login kopieren

现有数据

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

});</code>
Nach dem Login kopieren
Nach dem Login kopieren

回复内容:

网页中生成了一个类似

<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>
Nach dem Login kopieren
Nach dem Login kopieren

情况:
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>
Nach dem Login kopieren
Nach dem Login kopieren

示例需求效果

<code>飞机共6架,损坏4架,维修2架
坦克共2架,维修2架
</code>
Nach dem Login kopieren
Nach dem Login kopieren

现有数据

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

});</code>
Nach dem Login kopieren
Nach dem Login kopieren

<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>
Nach dem Login kopieren

运行的结果如下图所示:

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage