JQuery: How to count table columns?

Question

Using jQuery, how would you determine 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 can I determine this using jQuery?

Answer 1

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

Answer 2

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

I edited because I didn’t understand what you think was colspan's.

If you want to enable colspan, try looping through td in the first line:

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

Answer 3

This is the cleanest, in my opinion. It processes tables in tables. And short and simple:

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

Answer 4

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 .rows will collect lines from each HTMLTableSectionElement (THead, TBody and TFoot). Each section also has its own rows HTMLCollection, so you can filter them if necessary.

Answer 5

Be reliable. I did 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 kind of fun between different lines.

Answer 6

http://jsfiddle.net/WvN9u/

Just paying attention to colspan attr

Answer 7

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

Answer 8

To get around the td / th problem (and also fix the potential problem when 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++; } }); 

Answer 9

You need to set the id in the title bar:

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

Answer 10

I simplified Craig M.'s answer and modified to apply to the 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; } 

Answer 11

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

• Give your table an identification name
• Suppose your rows have the same number of columns and you have a table body.
• Use the code above, which in my opinion is the simplest here, similar to the first answer but provides a bit more detail

Answer 12

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