我有一个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，它工作正常，但是我需要为下一列分配一个类，但是只有在rowspan > 1的情况下，我才尝试过，但是它也将类分配给了第三行。我从this link复制了行跨代码。我也尝试停止传播，但没有帮助。
有任何建议吗？
可能会发现更有效的整体策略重构，但这可以解决第三列的问题：
$(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>