Jquery group by td with class

时间:2011-12-23 13:23:48

标签: javascript jquery

我有当前的表数据:

<table>     
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 8">8</td>
</tr>
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 23">23</td>
</tr>
<tr class="Guitarra">
    <td>Guitarra</td>
    <td class="td2 16">16</td>
</tr>
</table>

我想要做的是分组相同的TD,并将第二个td的值相加得到总数。考虑到这一点,我把产品的名称作为TR的一个类(不知道是否需要)

我编写了当前的javascript:

$(".groupWrapper").each(function() {
              var total = 0;
              $(this).find(".td2").each(function() {

                total += parseInt($(this).text());
              });
              $(this).append($("<td></td>").text('Total: ' + total));
            });

顺便说一下当前的java scripr不是groupby。

现在我迷路了,我不知道我还能做什么,或者是否有一种能够满足我想要的东西。

6 个答案:

答案 0 :(得分:2)

  1. </tr class="Violão">这没有意义。您只需关闭代码:</tr>。而且我假设你知道,因为你的其他代码是正确的(除了你的类名。检查this问题)。
  2. 如果您想将每个<td>的值添加到td2类,请参阅下文。
  3. 试试这个jQuery:

    var sum = 0;
    $(".td2").each(function(){
        sum = sum + $(this).text();
    });
    

    这应该将td中的每个数字添加到变量sum

答案 1 :(得分:2)

<table>     
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 8">8</td>
</tr>
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 23">23</td>
</tr class="Violão">
<tr class="Guitarra">
    <td>Guitarra</td>
    <td class="td2 16">16</td>
</tr>
</table>

var dictionary = {};

$("td").each(function(){
   if(!dictionary[$(this).attr("class"))
      dictionary[$(this).attr("class")] = 0;
   dictionary[$(this).attr("class")] += parseInt($(this).html());
});

答案 2 :(得分:2)

// declare an array to hold unique class names
var dictionary = [];

// Cycle through the table rows
$("table tr").each(function() {
    var thisName = $(this).attr("class");
    // Add them to the array if they aren't in it.
    if ($.inArray(thisName, dictionary) == -1) {
        dictionary.push(thisName);
    }
});

// Cycle through the array
for(var obj in dictionary) {
    var className = dictionary[obj];
    var total = 0;
    // Cycle through all tr's with the current class, get the amount from each, add them to the total
    $("table tr." + className).each(function() {
        total += parseInt($(this).children(".td2").text());
    });
    // Append a td with the total.
    $("table tr." + className).append("<td>Total: " + total + "</td>");
}

Fiddler(屋顶上):http://jsfiddle.net/ABRsj/

答案 3 :(得分:1)

假设tr只有一个给定的类!

var sums = [];
$('.td2').each(function(){
    var val = $(this).text();
    var parentClass = $(this).parent().attr('class');
    if(sums[parentClass] != undefined) sums[parentClass] +=parseFloat(val);
    else sums[parentClass] = parseFloat(val);
});
for(var key in sums){
    $('<tr><td>Total ('+key+')</td><td>'+sums[key]+'</td></tr>').appendTo($('table'));
}

我会给表格一些ID并更改为appendTo($('#<thID>'))

答案 4 :(得分:0)

答案 5 :(得分:0)

首先在桌面上使用ID并使用jQuery选择,因为匹配ID始终是最有效的。

然后您需要做的就是匹配类,将字符串解析为数字并添加它们。我在下面为你创建了一个简单的例子

http://jsfiddle.net/Phunky/Vng7F/

但你没有说清楚的是你期望获得td类的价值,如果这是动态的并且可以改变你可以使它更加多样化但是希望这会让你对某些地方有所了解离开这里