比较表中一列的参与者,并从其他列js中进行求和

时间:2015-09-21 10:48:30

标签: javascript arrays compare

我有一张桌子。我想比较参与者。如果参与者在表中有多个结果点,则脚本必须返回所有参与者结果的总和。等等每个参与者。 该表是从数据库(".$row["pnt"].".$row["station"].".$row["res"].")生成的: 参与者站点

aa  Some1   1
dd  Some1   2
aa  sm2 3
dd  sm2 4
bb  sm3 5
ee  sm3 6
  

例如,我要收到这样一张新表:

aa - 4,
dd - 6,
bb - 5,
ee - 6

我试过这样做:

$(document).ready(function () {
    $("body").click(function () {

        var rows = $("tbody tr");
        var jo = [];

        for (var i = 0; i < rows.length; i++) {

            for (var j = 1; j <= rows.length; j++) {

                var pnt1 = $(rows[i]).find(".pnt").html();
                var stations1 = $(rows[i]).find(".station").html();
                var pntR1 = $(rows[i]).find(".res").html();
                if (pnt1 == $(rows[j]).find(".pnt").html()) {
                    pntR1 = parseInt(pntR1);
                    pntR2 = parseInt($(rows[j]).find(".res").html());
                    jo.push(pnt1, pntR1, pntR2);
                    break;
                }

            }

        }

        console.log(jo);

    });
});

但我明白我走错了路。请帮我。如果有人能在这个问题上帮助我,我真的很感激。

评论后更新:

<table id="pntsRes">
<thead>
<tr>
    <th>Участники</th>
    <th>Баллы</th>
</tr>
</thead>
<tbody>
<tr><td class="pnt">aa</td><td class="station">AES</td><td class="res">1</td></tr><tr><td class="pnt">dd</td><td class="station">AES</td><td class="res">2</td></tr>
<tr><td class="pnt">aa</td><td class="station">Science</td><td class="res">3</td></tr>
<tr><td class="pnt">dd</td><td class="station">Science</td><td class="res">4</td></tr><tr><td class="pnt">bb</td><td class="station">Аэродром</td><td class="res">5</td></tr>
<tr><td class="pnt">ee</td><td class="station">aeroport</td><td class="res">6</td></tr></tbody>
</table>

2 个答案:

答案 0 :(得分:1)

首先,我会考虑将您的解决方案分解为三个函数 - 一个用于从HTML中提取数据(这本身就是一个有问题的实践),一个用于转换数据,另一个用于输出新表。这样,您的代码就更易于维护。

function getData() {
    var rows = $("tbody tr");
    var data = [];
    rows.each(function(idx, row){
        var pnt = row.find('.pnt').html(),
            station = row.find('.station').html()),
            res = parseInt(row.find('.res').html());
        data.push(pnt, station, res);
    });
}

然后我会考虑这样的第二种方法

// Pass the output from getData() into processData()
function processData(data){
    var groupedKeys = {};
    var groupedData = data.map(function(datum){
        var name = datum[0];
        var value = datum[2];
        groupedKeys[name] = (groupedKeys[name] || 0) + (value || 0);
    });
    var transformedData = [];
    Object.keys(groupedKeys).forEach(function(key){
        transformedData.push([key, groupedKeys[key]]);
        });
    return transformedData;
}

最后一种方法当然需要由你自己实施,这里可以改进一下,但这可能是一个好的开始。

答案 1 :(得分:1)

我使用了一个关联数组(它只是JavaScript中的一个对象),如下所示:

source code

我所做的改变:

var jo = [];

更改为对象而不是数组

var jo = {};

我还在内部循环中添加了if(isNaN(object [key]),以确保它们不会显示为NaN,因为我继续将它们添加到一起。

$(document).ready(function () {
    $("body").click(function () {

        var rows = $("tbody tr");
        var jo = {};
		console.log(rows);
        for (var i = 0; i < rows.length; i++) {

            for (var j = 1; j <= rows.length; j++) {

                var pnt1 = $(rows[i]).find(".pnt").html();
                var stations1 = $(rows[i]).find(".station").html();
                var pntR1 = $(rows[i]).find(".res").html();
                if (pnt1 == $(rows[j]).find(".pnt").html()) {
                    pntR1 = parseInt(pntR1);
                    pntR2 = parseInt($(rows[j]).find(".res").html());
                    if(isNaN(jo[pnt1])){
                        jo[pnt1] = 0;
                    }
                    jo[pnt1] += pntR1;
                    break;
                }

            }

        }
        console.log(jo);

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="pntsRes">
    <thead>
        <tr>
            <th>Участники</th>
            <th>Баллы</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="pnt">aa</td>
            <td class="station">AES</td>
            <td class="res">1</td>
        </tr>
        <tr>
            <td class="pnt">dd</td>
            <td class="station">AES</td>
            <td class="res">2</td>
        </tr>
        <tr>
            <td class="pnt">aa</td>
            <td class="station">Science</td>
            <td class="res">3</td>
        </tr>
        <tr>
            <td class="pnt">dd</td>
            <td class="station">Science</td>
            <td class="res">4</td>
        </tr>
        <tr>
            <td class="pnt">bb</td>
            <td class="station">Аэродром</td>
            <td class="res">5</td>
        </tr>
        <tr>
            <td class="pnt">ee</td>
            <td class="station">aeroport</td>
            <td class="res">6</td>
        </tr>
    </tbody>
</table>