jQuery:如何计算表列？

Question

使用jQuery,你如何计算表中有多少列？

<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(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将从每个HTMLTableSectionElement(THead,TBody和TFoot)中收集行.每个部分也有自己的rowsHTMLCollection,因此您可以根据需要过滤它们.