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あなたはとthの最大数を数えることを試みることができますtr：

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

デモンストレーション

コルスパンを考慮したい場合は、少し重いです：

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