JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
Before:
<table class="unmodified_table" border="1">
<tr><td>1</td><td>22</td></tr>
<tr><td>2</td><td >22</td></tr>
<tr><td>3</td><td >88</td></tr>
<tr><td>4</td><td>22</td></tr>
<tr><td>5</td><td >22</td></tr>
<tr><td>5</td><td >22</td></tr>
<tr><td>6</td><td>3</td></tr>
<tr><td>7</td><td >44</td></tr>
<tr><td>8</td><td >55</td></tr>
</table>
<br /> </br>
After:
<table class="modified_table" border="1">
<tr><td>1</td><td>22</td></tr>
<tr><td>2</td><td >22</td></tr>
<tr><td>3</td><td >88</td></tr>
<tr><td>4</td><td>22</td></tr>
<tr><td>5</td><td >22</td></tr>
<tr><td>5</td><td >22</td></tr>
<tr><td>6</td><td>3</td></tr>
<tr><td>7</td><td >44</td></tr>
<tr><td>8</td><td >55</td></tr>
</table>
JavaScript
var column2 = $('.modified_table td:nth-child(2)');
modifyTableRowspan(column2);
//the function
function modifyTableRowspan(column) {
var prevText = "";
var counter = 0;
column.each(function (index) {
var textValue = $(this).text();
if (index === 0) {
prevText = textValue;
}
if (textValue !== prevText || index === column.length - 1) {
var first = index - counter;
if (index === column.length - 1) {
counter = counter + 1;
}
column.eq(first).attr('rowspan', counter);
if (index === column.length - 1)
{
for (var j = index; j > first; j--) {
column.eq(j).remove();
}
}
else {
for (var i = index - 1; i > first; i--) {
column.eq(i).remove();
}
}
prevText = textValue;
counter = 0;
}
counter++;
});
}