jQuery的：如何统计表列？

使用jQuery，你将如何弄清楚表中有多less列？

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

在这个例子中的总列数是6.我怎么能确定这个使用jQuery？

Answer 1

干得好：

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

我编辑，因为我没有意识到你在计算colspan的。

如果你想包括使用colspan在第一行中尝试循环td：

 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

我认为这是最清洁的。 它处理表格内的表格。 简而言之：

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

Answer 4

在POJS（普通的旧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将从每个HTMLTableSectionElement （THead，TBody和TFoot）收集行。 每个部分也有自己的rows HTMLCollection，所以你可以过滤它们，如果需要的话。

Answer 5

要健壮..我要做这样的事情

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

以防万一我们在不同的行之间发生一些不愉快的事情。

Answer 6

http://jsfiddle.net/WvN9u/

只要注意colspan attr

Answer 7

传入一个类似$（'foo＃table'）或$（'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

为了规避td / th问题（也解决了attr（'colspan'给我的string）的一个潜在的问题，我去了这个：

 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

您必须为标题行设置一个ID：

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

然后你可以使用下面的函数：

 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

我简化了Craig M.的答案并修改为适用于td和th标签。

 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 

1. 给你的表一个id名字
2. 假设你的行都有相同数量的列，并且你有一个表体
3. 使用上面的代码，我认为这是最简单的，类似于第一个答案，但提供了更多的细节

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