使用 jQuery 合并具有特定类的表格单元格答案

【问题标题】：Merge table cells with specific class using jQuery使用 jQuery 合并具有特定类的表格单元格
【发布时间】：2017-01-24 07:08:29
【问题描述】：

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

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

以上代码结果如下。

没有合并的结果：

预期结果：

我怎样才能做到这一点？

【问题讨论】：

当被合并的单元格内部有不同的数据值时，你想做什么？
你也可以分享css吗？
@ÖzgürErsil CSS 在这里不相关。
@blackpen 不，我只是想合并它们是否包含任何数据值
@ÖzgürErsil 除了为具有类的单元格设置背景颜色外，没有应用任何 css

标签： javascript jquery html dom html-table

【解决方案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>

【讨论】：

谢谢，这是我所期待的，它工作正常，但在 (let $firstRow) 的脚本代码中，Let 关键字下方有一条红线，当鼠标悬停时显示语法错误它
@Ma6139735 let 关键字是一个新的 JavaScript 功能。如果它不起作用，请尝试将其替换为 var。
谢谢，其实 Let 也在工作，我只是好奇，因为它在那里显示错误，但是这个 var 关键字已经解决了那个问题，真的谢谢