Ricerca dell'indice di colonna utilizzando jQuery quando la tabella contiene celle spanning colonna

Question

Utilizzando jQuery, come posso trovare l'indice di colonna di una cella di tabella arbitraria nella tabella di esempio sottostante, in modo tale che le celle che si estendono su più colonne abbiano più indici?

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

Ecco un plug-in che può calcolare l'indice "noncolp".

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

Si potrebbe fare qualcosa di simile:

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

Sarebbe probabilmente un senso di farlo come un plugin o tramite estendere.

Answer 3

Il mio è abbastanza simile a quello di SolutionYogi, meno la creazione di un plug-in. Mi c'è voluto un po 'più a lungo ... ma io sono ancora orgoglioso ecco che è :)

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

versione leggermente modificata è qui: 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

Ci è una risposta più concisa qui: Get Index of a td considering the colspan using jquery

In breve:

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