I m using html table .I need to merge the row if rows have repeated values.
below is my code
function myFunction() {
const previousRow = {};
const colsChanged = {};
let dark = false;
Array.from(document.querySelectorAll('tbody tr')).forEach((tr, rowIdx) => {
Array.from(tr.children).forEach((td, colIdx) => {
if (rowIdx > 0 && previousRow[colIdx].text === td.innerText) {
previousRow[colIdx].elem.setAttribute('rowspan', ++previousRow[colIdx].span);
colsChanged[colIdx] = false;
td.remove();
} else {
previousRow[colIdx] = {
span: 1,
text: td.innerText,
elem: td,
dark
};
colsChanged[colIdx] = true;
}
});
const rowChanged = Object.values(colsChanged).every(Boolean);
dark = rowChanged && rowIdx > 0 ? !dark : dark;
if (dark) {
// tr.classList.add('dark');
}
});
}<body onload="myFunction()">
<table class="table table-bordered" id="rejecteddetails" style="border-collapse: separate;empty-cells: hide;">
<thead>
<tr>
<th class="text-center">
S.No
</th>
<th class="text-center">Reason</th>
<th class="text-center">Rejected By</th>
<th style="white-space: nowrap;">Rejected Date</th>
<th class="text-center">Response</th>
<th class="text-center" style="white-space: nowrap;">Response Added By</th>
<th class="text-center" style="white-space: nowrap;"> Response Added Date</th>
</tr>
</thead>
<tbody id="rejected_reason_table">
<tr>
<td>1</td>
<td>minimum thickness 25</td>
<td>Testing</td>
<td>2024-12-19 at 07:15 AM</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
</tr>
<tr>
<td>2</td>
<td>wrong thickness value</td>
<td>Test</td>
<td>2024-12-18 at 11:12 PM</td>
<td>corrected thickness. </td>
<td>Test</td>
<td>12-19-2024 at 12:53 AM</td>
</tr>
<tr>
<td>3</td>
<td>wrong thickness value</td>
<td>Test</td>
<td>2024-12-18 at 11:12 PM</td>
<td>thickness value corrected and submitted . </td>
<td>Test</td>
<td>12-19-2024 at 02:02 AM</td>
</tr>
<tr>
<td>4</td>
<td>wrong thickness value</td>
<td>Test</td>
<td>2024-12-18 at 11:12 PM</td>
<td>cannot update the value . value is static</td>
<td>Test</td>
<td>12-19-2024 at 06:59 AM</td>
</tr>
</tbody>
</table>
</body>Merging is working fine ,but I dont need to display 3, 4 in S.No column .I need to display only 2 because 2,3,4 are merged .