如何合并任何数量的（dyanamic）表格单元格具有相同的类？

Question

我想使用jquery合并具有相同类的表格​​单元格，我该怎么做？这里合并的单元格数量不是修复，任何人都有任何线索？
我的HTMl就像是

<table>
   <tbody>
        <tr>
            <td>text</td> 
            <td class="row">text</td>
            <td class="row">text</td>
            <td class="row">text</td>
        </tr>
         <tr>
            <td>text</td> 
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
         <tr>
            <td class="row">text</td> 
            <td class="row">text</td>
            <td>text</td>
            <td>text</td>
        </tr>       
        </tbody>
    </table>

我希望输出像

Answer 1

循环表行，检查是否有多个.row表格单元格。如果是这样，请将colspan添加到第一个，然后删除另一个。请注意，这些单元格的文本也将被删除。

＆＃13;

＆＃13;

$(function() {
  $('table tbody tr').each(function() {
    var colspan = $(this).find('td.row').length;
    if( colspan > 1 ) {
      $(this).find('td.row:first').attr('colspan', colspan);
      $(this).find('td.row:not(:first)').remove();
    }
  });
});

＆＃13;

td { border: 1px solid gray; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>text</td>
      <td class="row">text</td>
      <td class="row">text</td>
      <td class="row">text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td class="row">text</td>
      <td class="row">text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

分组包裹

＆＃13;

＆＃13;

$(function() {
  $('table tbody tr').each(function() {
    $(this).children().each(function() {
      if( $(this).attr('class') ) {
        var cls = $(this).attr('class'),
            nextCells = $(this).nextUntil('td:not(.'+cls+')'),
            colspan = nextCells.length+1;
        if( colspan > 1 ) {
          $(this).attr('colspan', colspan);
          nextCells.remove();
        }
      }      
    });
  });
});

＆＃13;

td { border: 1px solid gray; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>text</td>
      <td class="row">text</td>
      <td class="row">text</td>
      <td>text</td>
      <td class="row">text</td>
      <td class="row">text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td class="row">text</td>
      <td class="row">text</td>
      <td class="row">text</td>
      <td class="row">text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以按照以下方式做到...... 你必须在遍历每个tr元素时为每个类创建对象，并在第一个单元格中连接每个分组类的文本并应用col-span

它支持一行中不同类别的多个组

＆＃13;

＆＃13;

$('table tbody tr').each(function(){
  var group_cell={};
  $(this).find('td[class]').each(function(){
      var classname=$(this).attr('class');
      if(typeof group_cell[classname]==="undefined"){
        group_cell[classname]=[];
      }
      group_cell[classname].push($(this).text());
  });
  for(i in group_cell){
      $(this).find('td[class="'+i+'"]:first').text(group_cell[i][0]).attr('colspan',group_cell[i].length);
//OR
//$(this).find('td[class="'+i+'"]:first').text(group_cell[i].join(' ')).attr('colspan',group_cell[i].length);
      $(this).find('td[class="'+i+'"]').not(':first').remove();
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table border=1 cellpadding=1 cellspeccing=1>
   <tbody>
        <tr>
            <td>text</td> 
            <td class="row">text</td>
            <td class="row">text</td>
            <td class="row">text</td>
        </tr>
         <tr>
            <td class="group1">text</td> 
            <td class="group2">text</td>
            <td class="group3">text</td>
            <td class="group4">text</td>
        </tr>
         <tr>
            <td class="row">text</td> 
            <td class="row">text</td>
            <td>text</td>
            <td>text</td>
        </tr>       
        </tbody>
    </table>

＆＃13;

＆＃13;

＆＃13;