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

Question

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

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

Answer 1

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

tablename.rows[0].cells.length;

Answer 2

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

演示：http: //jsfiddle.net/Gtdru/

代码：

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 3

DOM 中没有这样的概念。

td您可以尝试计算and thin的最大数量tr：

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

示范

如果你想考虑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);
});    

示范

Answer 4

这将适用于复杂的表头：

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

Answer 5

干得好：

$(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 6

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