javascript - 使用 jQuery 合并具有特定类的表格单元格

Question

我正在尝试合并具有相同类的表格​​单元格。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>text</td>
      <td class="row">text</td>
      <td class="row">text</td>
      <td>text</td>
      <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>
      <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>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </tbody>
</table>

以上代码的结果如下。

未合并的结果:

预期结果:

我怎样才能实现这个目标？

Answer 1

试试这个:

$(function () {
  $('table tr').each(function () {
    let $firstRow
       ,colspan = 0
    $(this).find('td').each(function() {
      if ($(this).hasClass('row')) {
        // Save the first cell with class in $firstRow, remove the rest
        colspan === 0 ? $firstRow = $(this) : $(this).remove()
        // Count the number of cells
        colspan++
      } else if (colspan > 0) {
        // Assign the colspan and reset the counter
        $firstRow.attr('colspan', colspan)
        colspan = 0
      }
    })
    if (colspan > 0) {
      $firstRow.attr('colspan', colspan)
      colspan = 0
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>text</td>
      <td class="row">text</td>
      <td class="row">text</td>
      <td>text</td>
      <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>
      <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>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </tbody>
</table>