How to find a table's column count using the DOM?

Question

For row count using DOM, we have tablename.rows.length to get number of rows, but we don't have 'cols.length' for column count.

How can we find the number of columns (only using the DOM)?

Read this http://domenlightenment.com/ – w3uiguru Dec 11 '12 at 11:52 — w3uiguru, Dec 11 '12 at 11:52

senK · Accepted Answer · 2012-12-11T12:16:04.320

7

I think you can use cells to calculate the column, assuming that the number of column of first row will be same for all

tablename.rows[0].cells.length;

edited Dec 11 '12 at 12:16

answered Dec 11 '12 at 11:55

senK

2,782
1
27
38

i have to embed this, simple n short as I don't need colspans. thanks – mano Dec 14 '12 at 05:17

score 7 · Answer 2 · answered Dec 11 '12 at 12:04

I would use the table's rows property and the first row's cells property and total the colSpan property of each cell in the row. This will work in all major browsers back to IE 4 and should be pretty fast.

Demo: http://jsfiddle.net/Gtdru/

Code:

function getTableColumnCount(table) {
    var columnCount = 0;
    var rows = table.rows;
    if (rows.length > 0) {
        var cells = rows[0].cells;
        for (var i = 0, len = cells.length; i < len; ++i) {
            columnCount += cells[i].colSpan;
        }
    }
    return columnCount;
}

This should be the correct answer. jQuery version here - http://stackoverflow.com/questions/6683882/jquery-how-to-count-table-columns — web-nomad, Jan 03 '13 at 11:43

Denys Séguret · Answer 3 · 2012-12-11T11:58:10.080

2

There isn't such a concept in the DOM.

You could try and count the max number of td and th in tr :

var max = 0;
$('#tableId tr').each(function(){max=Math.max(max, $('td,th', this).length)});

Demonstration

If you want to take into account the colspan, it's a little heavier :

var max = 0;
$('#tableId tr').each(function(){
    var inTr = 0;
    $('td,th', this).each(function() { inTr += parseInt($(this).attr('colspan')) || 1;});
    max = Math.max(max,inTr);
});

Demonstration

edited Dec 11 '12 at 11:58

answered Dec 11 '12 at 11:52

Denys Séguret

372,613
87
782
758

1

Very quick you are.. i was about to point you out that you are missing td in the function. +1 from my side – w3uiguru Dec 11 '12 at 11:55
Thanks for the help, I will better try this – mano Dec 11 '12 at 11:58

score 1 · Answer 4 · answered Sep 11 '17 at 16:14

1

This will work with complex table headers :

$($('#table_id_here tbody tr')[0]).find('td').length

answered Sep 11 '17 at 16:14

italo.portinho

121
1
5

score 0 · Answer 5 · answered Dec 12 '12 at 06:24

Here you go:

$(function() {
    var colCount = 0;
    $('tr:nth-child(1) td').each(function () {
        if ($(this).prop('colspan')) {
            colCount += +$(this).prop('colspan');
        } else {
            colCount++;
        }
    });
    alert(colCount);
});

jsfiddle

Machado · Answer 6 · 2017-10-18T12:46:42.170

A very simple way to get the number of possible cols in any table is using the following (vanillaJS) function:

/**
 * Calculates the number of columns based on any row using colSpan attribute.
 *
 * @param {HTMLElement} table : The table element to be count.
 *
 * @return {int} The number of columns this table has.
 */
var getTableColSpan = function getTableColSpan(table) {

    var colSpan = 0; // initialize counter
    var trs = table.querySelectorAll('tr'); // get firt tr cells.

    for (var j = 0; j < trs.length; j++) {

        var tr = trs[j];
        var tds = tr.cells;

        var trColSpan = 0; // initialize counter

        // loops between columns and gets each one's colSpan
        for (var i = 0; i < tds.length; ++i) {
            trColSpan += tds[i].colSpan;
        }

        colSpan = trColSpan > colSpan ? trColSpan : colSpan;
    }

    return colSpan;
};

How to find a table's column count using the DOM?

6 Answers6