jQuery: How to count table columns?

Answer 1

This is the simple solution I have done: In case you are using TR change TH for TR. Using JQUERY:

<script>
        $(document).ready(function() {
            var number = $("table > tbody > tr:first > th").length;
            for(var i=0; i <= number; i++){
                $('th:nth-child('+ i +')').hide();
            }
        });
</script>

Answer 2

With jQuery and reduce it could look like this:

$.fn.tableCellCount = function() {
    return $(this).find('tr:first td, tr:first th').get().reduce(function(a,b) {
        return a + ($(b).attr('colspan') ? parseInt($(b).attr('colspan')) : 1);
    },0)
}

$('table').tableCellCount();

Or even simpler:

$.fn.tableCellCount = function() {
    return $(this).find('tr:first td, tr:first th').get().reduce(function(a,b) {
        return a + (b.colSpan ? parseInt(b.colSpan) : 1);
    },0)
}

$('table').tableCellCount();

Answer 3

function(){
    num_columns = 0;
    $("table td]").each(function(){
        num_columns = num_columns + ($(this).attr('colspan') == undefined ? 1 : $(this).attr('colspan'));
    });
    return num_columns;
}

Answer 4

var foo = document.getElementById("price-test-table")
foo.tBodies["0"].firstElementChild.children.length

1. Give your table an id name
2. Assume your rows all have the same amount of columns and you have a table body
3. Use above code, which I think is the simplest on here, similar to first answer but provides a little more detail

Answer 5

http://jsfiddle.net/WvN9u/

Just paying attention to colspan attr

Answer 6

/**
 * Get number of columns in table.
 * @param {string} table jQuery selector
 * @param {boolean} [malformed=false] whether to inspect each row of malformed table;
 * may take some time for large tables
 * @returns {?number} number of columns in table, null if table not found.
 */
function getTableColumnsCount(table, malformed) {
    malformed = malformed || false;

    var $table = $(table);
    if (!$table.length) {
        return null;
    }

    var rows = $table.children('thead, tfoot, tbody').children('tr');
    if (!malformed) {
        // for correct tables one row is enough
        rows = rows.first();
    }
    var maxCount = 0;
    rows.each(function () {
        var currentCount = 0;
        $(this).children('th, td').each(function () {
            currentCount += this.colSpan;
        });
        maxCount = Math.max(maxCount, currentCount);
    });

    return maxCount;
}

See in action https://jsfiddle.net/kqv7hdg5.

• Takes colspan into account.
• Works for nested tables.
• Works for <thead>, <tfoot>, <tbody>.
• Works for mix of <th> and <td>.
• Works for malformed tables.

Slightly modified version for those who would like to pass jQuery object instead of selector https://jsfiddle.net/5jL5kqp5.