如果上一列具有行跨度，则将类设置为下一列答案

【问题标题】：Set class to next column if previous column has rowspan如果上一列具有行跨度，则将类设置为下一列
【发布时间】：2020-01-23 15:44:38
【问题描述】：

我有一个 HTML 表格：

$(document).ready(function() {
  var span = 1;
  var prevTD = "";
  var prevTDVal = "";
  $("#table tr td:first-child").each(function () {
    $("#table tr td:nth-child(1)").each(function () {
      if (span > 1) {
        $(this).addClass('color');
      }
    });
    var $this = $(this);
    var value = $this.text();
    if (value === prevTDVal) {
      span++;
      if (prevTD != "") {
        prevTD.attr("rowspan", span);
        $this.remove();
      }
    } else {
      prevTD = $this;
      prevTDVal = value;
      span = 1;
    }
  });
});

table {
  border-collapse: collapse;
}
table td {
  padding: 5px;
}
.color {
  background: royalblue;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <table border="1" id="table">
      <tr>
        <td></td>
        <td>aslkda</td>
        <td>asdasd</td>
        <td>asasd</td>
        <td>adfasdas</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>asfasdasd</td>
        <td>asfdasdas</td>
        <td>asfasdas</td>
        <td>asfasdasdf</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>ff</td>
        <td>asff</td>
        <td>asfsdfs</td>
        <td>sfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfs</td>
        <td>sdfsd</td>
        <td>sdfsdfsd</td>
        <td>sdfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfsdf</td>
        <td>sdfdfsd</td>
        <td>sfsdfsd</td>
        <td>fkfke</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdf</td>
        <td>asfsdf</td>
        <td>djjdod</td>
        <td>ikowefk</td>
      </tr>
      <tr>
        <td>kfjsdkvn</td>
        <td>,xsnv</td>
        <td>ksfhjsdf</td>
        <td>sdkvjsdkv</td>
        <td>sdkfhsdk</td>
      </tr>
    </table>
  </body>
</html>

如果表的第一列具有相同的内容，那么我需要分配行跨度，这工作得很好，但我需要为下一列分配一个类，但前提是rowspan > 1，我已经尝试过，但它会将类分配给第三行也。我从this link 复制了行跨度代码。我也尝试停止传播，但没有帮助。

有什么建议吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

可能会发现对您的整体策略进行更有效的重构，但这会清除第三列问题：

$(document).ready(function() {
    let prevCell;
    let prevCellVal = '';
    let rowSpan = 1;

    $("#table tr").each(function() {
        let row = $(this);
        let firstCell = row.find('td:first-child');
        let firstCellVal = firstCell.text();

        if (firstCellVal === prevCellVal) {
            rowSpan++;

            if (prevCell) {
                prevCell.attr("rowspan", rowSpan);
                row.addClass('grouped');
                row.prev('tr:not(.grouped)')
                    .find('td:nth-child(2)')
                    .addClass('color');
                firstCell.remove();
            }
        } else {
            prevCell = firstCell;
            prevCellVal = firstCellVal;
            rowSpan = 1;
        }
    });
});

table {
  border-collapse: collapse;
}
table td {
  padding: 5px;
}
.grouped td:first-child, .color {
  background: royalblue;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <table border="1" id="table">
      <tr>
        <td></td>
        <td>aslkda</td>
        <td>asdasd</td>
        <td>asasd</td>
        <td>adfasdas</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>asfasdasd</td>
        <td>asfdasdas</td>
        <td>asfasdas</td>
        <td>asfasdasdf</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>ff</td>
        <td>asff</td>
        <td>asfsdfs</td>
        <td>sfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfs</td>
        <td>sdfsd</td>
        <td>sdfsdfsd</td>
        <td>sdfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfsdf</td>
        <td>sdfdfsd</td>
        <td>sfsdfsd</td>
        <td>fkfke</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdf</td>
        <td>asfsdf</td>
        <td>djjdod</td>
        <td>ikowefk</td>
      </tr>
      <tr>
        <td>kfjsdkvn</td>
        <td>,xsnv</td>
        <td>ksfhjsdf</td>
        <td>sdkvjsdkv</td>
        <td>sdkfhsdk</td>
      </tr>
    </table>
  </body>
</html>

Fiddle

【讨论】：

关闭 enouh，查看 content1 或 content2 的 rowspan == 1，不显示颜色，大于 1 时显示
检查，我已经编辑了我的 sn-p。现在第二列有我需要的颜色。
我需要你的英语更清楚。我的结果到底有什么不正确的地方？
你的结果已经足够接近了，现在请看我的结果，比较你的第二列和我的第二列。我的第 2 列在第 1 列行跨度 > 1 的位置具有颜色，但您的第 2 列在有行跨度的位置具有颜色。