Finding a colSpan Header for one of the cells or td's is Spans

Question

I have multiple column headers that spans of multiple column and I would like to find the correct header number/count for the columns.

I want to enter a column numbe

Answer 1

That's easy, as long as you don't have any rowspans:

function getCell(tr, col) {
    var cell = tr.firstElementChild;
    while (cell && (col -= cell.colSpan || 1)>=0)
        cell = cell.nextElementSibling;
    return cell;
}

See demonstration.

Answer 2

Edit: You should implement a simple array that hold the header location, see below,

var thLocator = [], colCount = 1;
$table.find('tr:first th').each(function () {
    for (var i = 0; i < this.colSpan; i++) {
        thLocator.push(colCount);
    }
    colCount++;
});

$table.find('td').click(function () {
    alert(thLocator[$(this).index()]);
});

And then anytime You can get the location of a td column. See DEMO -> Click on any TD to identify its col head position.

---

I am not sure which count you want so I wrote down all col count. See DEMO

$(function() {
    var $table = $('table');

    alert('Table Header Count ' + $table.find('tr:first th').length);

    var thCount = 0;
    $table.find('tr:first th').each(function () {
        thCount += this.colSpan;
    });

    alert('Computed TH Count ' + thCount );

    alert('Table TD Col Count ' + $table.find('tr:eq(1) td').length);
});