JSFiddle - React, Tailwind, and code Playground
by igos
HTML
Before:
<table border="1px">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
</table>
<br/><br/>
After:
<table id="foo" border="1px">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
</table>
<br/><br/>
Using mini jQuery Plugin:
<table id="bar" border="1px">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
...
JavaScript
var columnRef = undefined
$('#foo').find("tr").each(function(index, value) {
$(this).find("td").first().html();
if(columnRef != undefined && $(this).find("td").first().html() == columnRef.html()) {
$(this).find("td").first().remove();
columnRef.attr('rowspan',parseInt(columnRef.attr('rowspan'))+1);
}
else {
columnRef = $(this).find("td").first();
columnRef.attr('rowspan',1);
}
});
(function($) {
$.fn.tablerowspan = function(options) {
this.each(function() {
var columnRef = undefined
var element = $(this);
element.find("tr").each(function(index, value) {
$(this).find("td").first().html();
if(columnRef != undefined && $(this).find("td").first().html() == columnRef.html()) {
$(this).find("td").first().remove();
columnRef.attr('rowspan',parseInt(columnRef.attr('rowspan'))+1);
}
else {
columnRef = $(this).find("td").first();
columnRef.attr('rowspan',1);
}
});
});
return this;
};
})(jQuery);
$('#bar').tablerowspan();