Tablo sütun genişleyen hücreler içerdiğinde jQuery'yi kullanarak sütun dizini bulma

Question

jQuery'yi kullanarak, aşağıdaki örnek tablodaki rasgele bir tablo hücresinin sütun dizinini nasıl bulabilirim, böylece birden çok sütuna yayılan hücreler birden çok dizine sahip olur? Muhtemelen bir eklenti olarak veya uzatmak yoluyla bunu yapmak için mantıklı olurdu

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

:

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

İşte 'noncolspan' endeksi hesaplayabilen bir eklentidir.

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

Böyle bir şey yapabilirdi.

Answer 3

Mine, bir eklentinin oluşturulması dışında SolutionYogi'ye oldukça benzer. Bana biraz daha uzun sürdü ... ama

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

Biraz değiştirilmiş versiyonu burada :) yani burada hala gurur duyuyorum: Orada 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

Kısacası Get Index of a td considering the colspan using jquery

:

burada daha özlü cevaptır