使用JQuery动态设置colspan值

Question

我有一个单元格中包含动态数据的表。

>值3

SL	值1	值2
1	A	B
2	C	D	D

您可以尝试这样的方法。

我基本上取每个td，将文本与下一个td进行比较，如果匹配，则合并它们。

$(document).ready(function() {
$("table tbody tr td").each(function() {
var n1 = $(this).text();
var t = $(this).nextUntil("td:not(:contains(" + n1 + "))");
var n3 = t.length || 0;
$(this).attr("colspan", n3 + 1);
t.remove();
});
});

$(document).ready(function() {
$("table tbody tr td").each(function() {
var n1 = $(this).text();
var t = $(this).nextUntil("td:not(:contains(" + n1 + "))");
var n3 = t.length || 0;
$(this).attr("colspan", n3 + 1);
t.remove();
});
});

table {
text-align: center
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>SL</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Value 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A</td>
<td>A</td>
<td>B</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>D</td>
<td>D</td>
<td>D</td>
</tr>
</tbody>
</table>

尝试如下。解释在评论中。

$(document).ready(function() {
// loop over each tr
$('tr').each((index, tr) => {
// get first td
let td = $(tr).find('td').eq(0);
// set colspan value
let colspan = 1;
// if td exist then proceed
while (td.length) {
// find next td
let next = td.next();
// if current td and next td has same text then remove next td
if (td.text().trim() == next.text().trim()) {
// remove next td
next.remove();
// increase colspan
colspan++;
// set colspan
td.attr('colspan', colspan);
} else {
// reset colspan
colspan = 1;
// set next as current td
td = next;
}
}
});
});

.s-table th,
.s-table td {
border: 1px solid;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="s-table-container">
<table class="s-table">
<thead>
<tr>
<th>SL</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>2</td>
<td>D</td>
<td>D</td>
<td>D</td>
</tr>
</tbody>
</table>
</div>