jQuery: How to count table columns?

Using jQuery, how would you figure out how many columns are in a table?

<script>
    alert($('table').columnCount());
</script>

<table>
    <tr>
        <td>spans one column</td>
        <td colspan="2">spans two columns</td>
        <td colspan="3">spans three columns</td>
    <tr>
</table>

The total number of columns in this example is 6. How could I determine this using jQuery?

Here you go:

jsFiddle

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

$("table").find("tr:first td").length;

I edited as I didn't realize you were counting the colspan's.

If you want to include using colspan try a loop through the td's in the first row:

var cols = $("table").find("tr:first td");
var count = 0;
for(var i = 0; i < cols.length; i++)
{
   var colspan = cols.eq(i).attr("colspan");
   if( colspan && colspan > 1)
   {
      count += colspan;
   }else{
      count++;
   }
}

This is the cleanest in my opinion. It handles tables within tables. And is short and simple:

$("table > tbody > tr:first > td").length

In POJS (Plain Old JavaScript):

HTML:

<table id="foo">
    <thead></thead>
    <tbody>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="3">3</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

JS:

var foo = document.getElementById("foo"), i = 0, j = 0, row, cell, numCols = 0;
//loop through HTMLTableElement.rows (includes thead, tbody, tfoot)
for(i;i<foo.rows.length;i++)
{
    row = foo.rows[i];
    //loop through HTMLTableRowElement.cells
    for(j = 0;j<row.cells.length;j++)
    {
        cell = row.cells[j];
        numCols += cell.colSpan;
        cell = null;
    }
    row = null;
}
    
alert(numCols) //6;

[HTMLTableElement][1][.rows][2] will collect rows from every [HTMLTableSectionElement][3] (THead, TBody, and TFoot). Each section also has its own rows HTMLCollection, so you can filter them if need be.

[1]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425 "HTMLTableElement" [2]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6156016 "HTMLTableElement.rows" [3]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573 "HTMLTableSectionElement"

To be robust..I'd do something like this

alert(numCol("table") + " is the max number of cols");

function numCol(table) {
	var maxColNum = 0;
	
	var i=0;
	var trs = $(table).find("tr");

	for ( i=0; i<trs.length; i++ ) {
		maxColNum = Math.max(maxColNum, getColForTr(trs[i]));
	}
				 
	return maxColNum;
}

function getColForTr(tr) {
			
	var tds = $(tr).find("td");

	var numCols = 0;
	
	var i=0;
	for ( i=0; i<tds.length; i++ ) {
		var span = $(tds[i]).attr("colspan");
		
		if ( span )
			numCols += parseInt(span);
		else {
			numCols++;
		}
	}
	return numCols;
}

Just in case we have some funkiness going on between different rows.

http://jsfiddle.net/WvN9u/

Just paying attention to colspan attr

Pass in a table with something like $('foo#table') or $('table:first')

function getColumnCount(e) { //Expects jQuery table object
    var c= 0;
    e.find('tbody tr:first td').map(function(i,o) { c += ( $(o).attr('colspan') === undefined ? 1 : parseInt($(o).attr('colspan')) ) } );
    return c;
}

To circumvent the td/th issue (and also fix a potential issue where attr('colspan') was giving me strings) I went with this:

var colspan = 0;
$('#table').find('tr:first').children().each(function(){
    var cs = $(this).attr('colspan');
    if(cs > 0){ colspan += Number(cs); }
    else{ colspan++; }
});

/**
 * 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.

You have to set an ID to the header row:

<table>
	<tr id="headerRow">
		<td>spans one column</td>
		<td colspan="2">spans two columns</td>
		<td colspan="3">spans three columns</td>
	</tr>
</table>

And then you can use the following function:

function getColumnCount(headerRowId) {
	var columnCount = 0;
	$('#' + headerRowId + ' > td').each(function() {
		var colspanValue = $(this).attr('colspan');
		if (colspanValue == undefined) {
			columnCount++;
		} else {
			columnCount = columnCount + parseInt(colspanValue);
		}
	});
	return columnCount;
}

I simplified answer of Craig M. And modified to apply to both td and th tag.

function GetColumnCount($Table)
{
    var ColCount = 0;
	$Table.find("tr").eq(0).find("th,td").each(function ()
	{
		ColCount += $(this).attr("colspan") ? parseInt($(this).attr("colspan")) : 1;
	});

	return ColCount;
}

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

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();

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>

One Line:

$('.table-responsive tr th').children().length;

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