Tìm chỉ mục cột bằng cách sử dụng jQuery khi bảng chứa các ô mở rộng cột

Question

Sử dụng jQuery, làm cách nào tôi có thể tìm thấy chỉ mục cột của ô bảng tùy ý trong bảng ví dụ bên dưới, sao cho các ô bao trùm nhiều cột có nhiều chỉ mục?

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

Đây là plugin có thể tính toán chỉ mục '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

Bạn có thể làm một cái gì đó như thế này:

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

Nó có lẽ muốn làm cho tinh thần để làm điều đó như là một plugin hoặc thông qua mở rộng.

Answer 3

Mỏ khá giống với SolutionYogi, trừ khi tạo plugin. Tôi đã mất còn một chút ... nhưng tôi vẫn tự hào về nó nên ở đây nó là :)

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

phiên bản sửa đổi Hơi là ở đây: 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

Có là câu trả lời ngắn gọn hơn tại đây: Get Index of a td considering the colspan using jquery

Ngắn gọn:

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