Für die Zeilenanzahl mit DOM haben wir tablename.rows.length, um die Anzahl der Zeilen abzurufen, aber wir haben nicht 'cols.length' für die Spaltenanzahl.

Wie können wir die Anzahl der Spalten ermitteln (nur mit dem DOM)?

4
mano 11 Dez. 2012 im 15:50

6 Antworten

Beste Antwort

Ich denke, Sie können Zellen verwenden, um die Spalte zu berechnen, vorausgesetzt, die Anzahl der Spalten der ersten Zeile ist für alle gleich

tablename.rows[0].cells.length;
5
senK 11 Dez. 2012 im 12:16

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;
}
7
Tim Down 11 Dez. 2012 im 12:04

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;
};
0
Machado 18 Okt. 2017 im 12:46

Dies funktioniert mit komplexen Tabellenüberschriften:

$($('#table_id_here tbody tr')[0]).find('td').length
0
italo.portinho 11 Sept. 2017 im 16:14

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

2
Denys Séguret 11 Dez. 2012 im 11:58

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

0
palaѕн 12 Dez. 2012 im 06:24