Question

对于使用DOM的行计数，我们有tablename.rows.length来获取行数，但是我们没有'cols.length'来计算列数。

我们如何找到列数（仅使用DOM）？

Answer 1

我将使用表的rows属性和第一行的cells属性，并总计行中每个单元格的colSpan属性。这将适用于所有主流浏览器，返回到IE 4，应该非常快。

代码：

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

Answer 2

我认为您可以使用单元格来计算列，假设第一行的列数对于所有列都相同

tablename.rows[0].cells.length;

Answer 3

DOM中没有这样的概念。

您可以尝试计算td中th和tr的最大数量：

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

Demonstration

如果你想考虑colspan，它会更重一点：

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

Answer 4

你走了：

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

jsfiddle

Answer 5

这适用于复杂的表头：

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

Answer 6

在任何表中获取可能cols数量的一种非常简单的方法是使用以下（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;
};

如何使用DOM查找表的列数？

6 个答案: