Encontrar índice de columna usando jQuery cuando la tabla contiene celdas que abarcan columnas

Question

Usando jQuery, ¿cómo puedo encontrar el índice de columna de una celda de tabla arbitraria en la siguiente tabla de ejemplo, de manera que las celdas que abarcan varias columnas tienen múltiples índices?

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? 

Answer 1

Aquí hay un complemento que puede calcular el índice 'noncolspan'.

$(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; 
}; 

Answer 2

Usted podría hacer algo como esto:

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

Probablemente tendría sentido hacer como un plugin o por medio de extender.

Answer 3

Mine es bastante similar a SolutionYogi's, menos la creación de un plugin. Me tomó un poco más de tiempo ... pero todavía estoy orgulloso de ello así que aquí está :)

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

Answer 4

versión ligeramente modificada está aquí: 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; 
}; 

Answer 5

Hay es una respuesta más concisa aquí: Get Index of a td considering the colspan using jquery

En resumen:

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