CODEWITHSUNDEEP
jqueryhtml-table
keebOo
keebOo

Reputation: 81

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

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.

Upvotes: 2

Views: 3071

Answers (2)

Alnitak
Alnitak

Reputation: 339927

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.

Upvotes: 2

Cranio
Cranio

Reputation: 9847

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". ​

Upvotes: 4

Related Questions