Finding column index using jQuery when table contains column-spanning cells

Question

Using jQuery, how can I find the column index of an arbitrary table cell in the example table below, such that cells spanning multiple columns have multiple indexes?

HTML

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td id="example1">Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
    </tr>
    <tr>
      <td colspan="2">One</td>
      <td colspan="2">Two</td>
      <td colspan="2" id="example2">Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
    </tr>
  </tbody>
</table>

jQuery

var cell = $("#example1");
var example1ColIndex = cell.parent("tr").children().index(cell);
// == 2. This is fine.

cell = $("#example2");
var example2ColumnIndex = cell.parent("tr").children().index(cell);
// == 2. It should be 4 (or 5, but I only need the lowest). How can I do this?

I think you'd have to write something on your own (like seth did below). However, beware of rowspans, that would make your calculations more difficult. — aquinas
– aquinas, Commented Jul 22, 2009 at 16:42

SolutionYogi · Accepted Answer · 2010-04-20 19:01:06Z

29

Here's a plugin which can calculate the 'noncolspan' index.

$(document).ready(
        function()
        {
        console.log($('#example2').getNonColSpanIndex()); //logs 4
        console.log($('#example1').getNonColSpanIndex()); //logs 2
    }

);

$.fn.getNonColSpanIndex = function() {
    if(! $(this).is('td') && ! $(this).is('th'))
        return -1;

    var allCells = this.parent('tr').children();
    var normalIndex = allCells.index(this);
    var nonColSpanIndex = 0;

    allCells.each(
        function(i, item)
        {
            if(i == normalIndex)
                return false;

            var colspan = $(this).attr('colspan');
            colspan = colspan ? parseInt(colspan) : 1;
            nonColSpanIndex += colspan;
        }
    );

    return nonColSpanIndex;
};

edited Apr 20, 2010 at 19:01

answered Jul 22, 2009 at 16:51

SolutionYogi

32.4k12 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andre Haverdings Over a year ago

consider changing the first line in the function to (to support table headers) if(! $(this).is('td') && ! $(this).is('th'))

Gennady Shumakher Over a year ago

@SolutionYogi, I think your updated code as if(! $(this).is('td') || ! $(this).is('th')) instead of if(! $(this).is('td') && ! $(this).is('th'))

SolutionYogi Over a year ago

Gennady, I think I have the correct code in there. If the current element is not TD or TH, I want to return -1 as I can not determine col span index for non TD/TH elements.

Gennady Shumakher Over a year ago

SolutionYogi, the problem is the current condition says 'if the current element is not TD or is not TH' which always results to true for any element...

SolutionYogi Over a year ago

Gennaldy, you are right. I don't know what I was thinking! Thank you for the correction.

|

phairoh · Accepted Answer · 2009-07-22 17:00:06Z

5

Mine is quite similar to SolutionYogi's, minus the creation of a plugin. It took me a bit longer... but I'm still proud of it so here it is :)

cell = $("#example2");
var example2ColumnIndex2 = 0;

cell.parent("tr").children().each(function () {
    if(cell.get(0) != this){
        var colIncrementor = $(this).attr("colspan");
        colIncrementor = colIncrementor ? colIncrementor : 1;
        example2ColumnIndex2 += parseInt(colIncrementor);
    }
});
console.log(example2ColumnIndex2);

answered Jul 22, 2009 at 17:00

phairoh

10.6k4 gold badges25 silver badges18 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:33:14Z

4

There is a more concise answer here: Get Index of a td considering the colspan using jquery

In short:

var index = 0;
$("#example2").prevAll("td").each(function() {
    index += this.colSpan;
});
console.log(index);

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Nov 12, 2014 at 21:17

Alan B. Dee

5,6565 gold badges36 silver badges31 bronze badges

Comments

seth · Accepted Answer · 2009-07-22 16:44:57Z

2

You could do something like this:

 var index = 0;
 cell.parent('tr').children().each( 
     function(idx,node) { 
           if ($(node).attr('colspan')) {
             index+=parseInt($(node).attr('colspan'),10); 
           } else {
              index++;
           }

         return !(node === cell[0]);
     }
 );
 console.log(index);

It'd probably make sense to do it as a plugin or via extend.

edited Jul 22, 2009 at 16:44

answered Jul 22, 2009 at 16:39

seth

37.3k7 gold badges63 silver badges58 bronze badges

Comments

LCJ · Accepted Answer · 2012-09-18 08:15:38Z

Slightly modified version is here: http://jsfiddle.net/Lijo/uGKHB/13/

//INDEX
alert ( GetNonColSpanIndex ('Type'));

function GetNonColSpanIndex(referenceHeaderCellValue) {

    var selectedCell = $("th").filter(function (i) {
        return ($.trim($(this).html()  )) == referenceHeaderCellValue;

    });

    alert(selectedCell.html());

    var allCells = $(selectedCell).parent('tr').children();
    var normalIndex = allCells.index($(selectedCell));
    var nonColSpanIndex = 0;

    allCells.each(
    function (i, item) {
        if (i == normalIndex)
            return false;

        var colspan = $(selectedCell).attr('colspan');
        colspan = colspan ? parseInt(colspan) : 1;
        nonColSpanIndex += colspan;
    }
    );

    return nonColSpanIndex;
};

Collectives™ on Stack Overflow

Finding column index using jQuery when table contains column-spanning cells

HTML

jQuery

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

jQuery

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related