動態計算並設置colspan值

Question

我在單元格中有一個包含冗餘數據的表。 [左表]

我需要將它們連接到一個單元格中。 [右表]表中的

結構：

<table> 
    <tr> 
    <td class="bold">Value1:</td> 
    <td class="green">A</td> 
    <td class="green">A</td> 
    <td class="green">A</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td class="green">B</td> 
    <td class="green">B</td> 
    </tr> 
    <tr> 
    <td class="bold">Value2:</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td class="green">C</td> 
    <td class="green">C</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td class="green">D</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 

我能夠隱藏多餘細胞，但我需要以某種方式設置合併單元格。

$(document).ready(function() { 

var all = $('.green'); 
var seen = {}; 
all.each(function() { 
    var txt = $(this).text(); 
    if (seen[txt]) { 
     $(this).hide(); 
    } 
    else { 
     seen[txt] = true; 
    } 
}); 


}); 

謝謝。

Answer 1

var first; 
var prev = undefined; 
var colspan = 1; 

var setColspan = function() { 
    first.attr('colspan', colspan); 
    colspan = 1; 
} 

all.each(function() { 
    var txt = $(this).text(); 
    if (prev === txt) { 
     colspan += 1; 
     $(this).remove(); 
    } else { 
     // doesnt match, set colspan on first and reset colspan counter 
     if (colspan > 1) { 
      setColspan(); 
     } 
     first = $(this); 
     prev = txt; 
    } 
}); 

if (colspan > 1) { 
    setColspan(); 
} 

好好考慮一下你想要做什麼，檢查匹配列值的連續塊，如果找到匹配項，則將其刪除，當它找不到匹配項並且colspan足夠大時，它將colspan設置爲列表中的第一個，然後重置。如果你的連續值跨越一行的結尾並進入下一行的開始，它就不起作用。如果情況如此，則會想要逐行進行

如果最後一組列也是連續的，則更新上面的邊緣情況。那麼在那種情況下它不會設置colspan。

Answer 2

您可以設置通過合併單元格，

var cell=$([selector]); 
cell.attr('colspan',N); 

，然後刪除以下的兄弟姐妹

var sib=cell.next(); 
for(var i=0;i<N;i++) 
{ 
    if(sib.length==0)break; 
    var toBeRemoved=sib; 
    sib=sib.next(); 
    toBeRemoved.remove(); 
}