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（普通旧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

要健壮......我会做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;
}

以防我们在不同的行之间进行一些琐事。

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'）给我字符串的潜在问题）我接受了这个：

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

为您的表格提供ID名称
假设您的行具有相同数量的列，并且您有一个表体
使用上面的代码，我认为这是最简单的，类似于第一个答案但提供了更多细节

Answer 12

使用jQuery和reduce它可能看起来像这样：

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

甚至更简单：

$.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 13

这是我所做的简单解决方案：如果您使用 TR 将 TH 更改为 TR 。使用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 14

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

见行动https://jsfiddle.net/kqv7hdg5。

考虑colspan。
适用于嵌套表。
适用于<thead>，<tfoot>，<tbody>。
适用于<th>和<td>的混合。
适用于格式错误的表格。

对于那些想要传递jQuery对象而不是选择器https://jsfiddle.net/5jL5kqp5的用户进行了略微修改。

Answer 15

一行：

   if ( err.response ) {
        /* format and send the useful err.response message to the browser user */
        return
      } else {
        const errid = uuidv4()
        const message = 'Something went wrong. ' +
          'If it keeps happening please contact us and mention error id ' + 
          errid
        console.error (message, err)
        /* send the message to the browser user */ 
        return
      }

Answer 16

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

jQuery：如何计算表列？

16 个答案: