Заголовок HTML-таблицы Группировка с помощью jQuery

Question

Я хочу сгруппировать заголовок таблицы в соответствии с тем же контентом.

<table id="tblSample" border="1" > 
    <tbody> 
     <tr><th>Group#1</th><th>Group#1</th><th>Group#1</th><th>Group#21</th></tr> 
     <tr><th>Sub-Group#1</th><th>Sub-Group#1</th><th>Sub-Group#2</th><th>Sub-Group#2</th></tr> 
     <tr><td>1</td><td>2</td><td>3</td><td>4</td> </tr>  
    </tbody> 
</table> 

Здесь я хочу, чтобы объединить столбцы группы № 1 в качестве asingle колонке и Подгруппа № 1, а также. Есть идеи? Я пробовал код, но он не работал. Вот мой демо: http://jsfiddle.net/L3ab1edw/1/

ожидается выход: ------------------------------------------------------- Group#1 | Group#2 ------------------------|--------------------------------- Sub-Group#1 | Sub-Group#2 -----------|------------|------------|--------------------- 1 |2 |3 |4

$(document).ready(function() { 
    $('#tblSample').each(function() { 
     var Column_number_to_Merge = 1; 
      var Previous_TH = null; 
     var i = 1; 
     $("thead",this).find('tr').each(function() { 
       var Current_th = $(this).find('th:nth-child(' + Column_number_to_Merge + ')'); 

      if (Previous_TH == null) { 

       Previous_TH = Current_th; 
       i = 1; 
      } 
      else if (Current_th.text() == Previous_TH.text()) { 

       Current_th.remove(); 

       Previous_TH.attr('colspan', i + 1); 
       i = i + 1; 
      } 
      else { 

       Previous_TH = Current_th; 
       i = 1; 
      } 
     }); 
    }); 
}); 

Answer 1

Использование colspan:

<table id="tblSample" border="1" > 
    <tbody> 
     <tr><th colspan="3">Group#1</th><th>Group#21</th></tr> 
     <tr><th>Sub-Group#1</th><th>Sub-Group#1</th><th>Sub-Group#2</th><th>Sub-Group#2</th></tr> 
     <tr><td>1</td><td>2</td><td>3</td><td>4</td> </tr>  
    </tbody> 
</table> 

Я не понимаю, почему вам нужен JQuery, чтобы сделать такую ​​простую задачу, но здесь вы найдете:

$("#tblSample") 
    .find("tbody tr:first-child") 
    .html('<th colspan="3">Group#1</th><th>Group#21</th>');