Wie finde ich die Spaltenanzahl einer Tabelle mithilfe des DOM?

Ich würde die Eigenschaft rows der Tabelle und die Eigenschaft cells der ersten Zeile verwenden und die Eigenschaft colSpan jeder Zelle in der Zeile summieren. Dies funktioniert in allen gängigen Browsern zurück zu IE 4 und sollte ziemlich schnell sein.

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;
}

Eine sehr einfache Möglichkeit, die Anzahl der möglichen Spalten in einer Tabelle zu ermitteln, ist die Verwendung der folgenden Funktion (vanillaJS):

/**
 * 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;
};

Dies funktioniert mit komplexen Tabellenüberschriften:

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

Es gibt kein solches Konzept im DOM.

Sie können versuchen, die maximale Anzahl von td und th in tr zu zählen:

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

Demonstration

Wenn Sie den Colspan berücksichtigen möchten, ist er etwas schwerer:

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

Bitte schön:

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

jsfiddle