How to count td of single column with particular class with jQuery

Question

I've a html table, generated by code, of many rows and column. Some of this TD has a ON class to style it differently.

The structure of table has an header, a body, and a footer row.

I'd like to sum the quantity of all the TD with class 'ON' in each column and put the result on last row (footer) in each column.

How can I do it? (the rows and column are not a 'fixed matrix', so I don't know in advance how many rows and columns has the table)

Example table:

data       | id_1 | id_2 | id_3 | ...
2012-06-20 | "ON" |      |      | ...
2012-06-21 | "ON" |      |      | ...
2012-06-22 | "ON" | "ON" |      | ...
2012-06-23 | "ON" |      | "ON" | ...
2012-06-24 | "ON" | "ON" |      | ...
tot        |   5  |   2  |   1  | ...

UPDATE: mixing solutions of CRANIO and ALNITAK this is the result:

var a = [];
$('td').each(function() {

    var n = $(this).index();
    if($(this).hasClass('on')){
       a[n] = a[n] ? a[n] + 1 : 1;
    }else{
       a[n] = a[n] ? a[n] : 0;
    }
});

var t = $('<tr>').appendTo('#tableID > tfoot');
$.each(a, function(i, n) {
    t.append($('<td>', { text: i === 0 ? 'total' : n }));
});

In this way you add ZEROS (or empty space ---> a[n] = a[n] ? a[n] : ''; <--- to columns without TD.on and resolve little bug if there are some empty cols on the end of table (in the elegant solution of alnitak the TD on last row were not added)

P.S. useful also to create different total rows, on different TD.class, appending more TR based upon different class.

Clever editing, I appreciated so much that you mixed the two solutions (mine and @Alnitak 's), and came up with your own, making it available to all the users... definitely upvoting :) — Cranio
– Cranio, Commented Jun 25, 2012 at 16:23
@Cranio yup, it's a good mix of the two answers. The first loop could be a lot more succinct, though (see my updated answer). — Alnitak
– Alnitak, Commented Jun 25, 2012 at 16:24

Cranio · Accepted Answer · 2012-06-25 13:19:13Z

4

See http://jsfiddle.net/cranio/RTugL/

I've tried this table:

<table>
<tr>
    <td></td>
    <td></td>
    <td class='on'>.</td>
    <td class='on'>.</td>
</tr>    

<tr>
    <td class='on'>.</td>
    <td class='on'>.</td>
    <td></td>
    <td></td>
</tr>    
<tr>
    <td></td>
    <td class='on'>.</td>
    <td class='on'> .</td>
    <td class='on'>.</td>
</tr>    </table>

with this code:

var a = new Array();
$("table tr").each(
    function (i,e)
    {
        $(e).find("td").each(
            function (i,e)
            {
                if (!a[i]) a[i] = 0;
               if ($(e).hasClass("on")) a[i]++;   
            });});
var lastrow = $("<tr>");
$.each(a, function(i,e) { lastrow.append("<td>"+e+"</td>");});
$("table").append(lastrow);

What I do is count the occurrences of TD.on in an array, updated for every "position".

edited Jun 25, 2012 at 13:19

answered Jun 25, 2012 at 12:57

Cranio

9,8764 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Cranio Over a year ago

This example counts for ALL the columns. If you want to exclude some columns tell me.

nnnnnn Over a year ago

Demos are great, but please post the code in your answer too - sometimes jsfiddle is unavailable. (No need to post any infrastructure that you setup just to make the fiddle work.)

Cranio Over a year ago

In this case I've posted the infrastructure to make sure I've interpreted the OP's request in the right way, @nnnnnn

keebOo Over a year ago

@Cranio ...longer but useful (little bug on version of Alnitak: if there are some empty colums at the end, no TD is added) ;) use this

Alnitak Over a year ago

@keebOo and to be fair I think you've used much more of my answer than his ;-)

|

Alnitak · Accepted Answer · 2012-06-25 16:32:19Z

2

Here's the shortest code I can currently come up with:

var a = [];
$('td.on').each(function() {
    var n = $(this).index();
    a[n] = a[n] ? a[n] + 1 : 1;
});

var t = $('<tr>').appendTo('table');
$.each(a, function(i, n) {
    t.append($('<td>', { text: i === 0 ? 'total' : n }));
});

working sample at http://jsfiddle.net/alnitak/6XTvN/

EDIT to ensure an empty cell (and zeros) for columns that don't match here's a variant for the first code block:

var a = [];
$('td').each(function() {
    var n = $(this).index();
    a[n] = a[n] || 0;
    a[n] += $(this).hasClass('on');
});

My first version had the minor defect that a column with no matching cells would produce an undefined value in a, leading to a blank cell, but worse a completely missing cell for any trailing columns that had no matching cells.

edited Jun 25, 2012 at 16:32

answered Jun 25, 2012 at 14:01

Alnitak

341k72 gold badges420 silver badges503 bronze badges

4 Comments

Cranio Over a year ago

Much shorter than mine, good, upvoting :) Didn't think about .index()

Alnitak Over a year ago

@Cranio mine also handles the header column ;-)

keebOo Over a year ago

it' ok, but give me an error inside an ajax success (really don't find yet why, also beacuse on jsfiddle it's correct). but resolved using the first part on "count array" and write result on footer row. :) thanks

keebOo Over a year ago

@Alnitak really nice (I hate to use if when there is a so clear and elegant solution), I'll update again the code. thanks.

Collectives™ on Stack Overflow

How to count td of single column with particular class with jQuery

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related