views:

3419

answers:

3

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?
+1  A: 

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.

seth
+9  A: 

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;
};
SolutionYogi
Andre Haverdings
Good idea Andre. Updated the code.
SolutionYogi
Gennady Shumakher
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.
SolutionYogi
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...
Gennady Shumakher
Gennaldy, you are right. I don't know what I was thinking! Thank you for the correction.
SolutionYogi
+1  A: 

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);
Phairoh