JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1" cellpadding="10" id="one">
<thead>
</thead>
<tbody>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS
#two tbody > tr:nth-of-type(odd) {
background-color: #55f;
}
JavaScript
$(document).ready(function(){
var counter = 1;
var restricted = 0;
var flag = 0;
$("#one tbody > tr td:first-child").each(function(){
var x = $(this).attr("rowspan");
if(counter > restricted){
if(flag == 0){
$(this).parent().css({"background-color":"#f0f"});
if (typeof x !== typeof undefined && x !== false) {
var $selector = $(this).parent();
for(var i=1;i<x;i++){
$selector.next('tr').css({"background-color":"#f0f"});
var $selector = $selector.next('tr');
}
if(flag == 0){
flag = 1;
}
restricted = restricted + parseInt(x);
}
else{
restricted = restricted + 1;
if(flag == 0){
flag = 1;
}
}
}
else if(flag == 1){
var x = $(this).attr("rowspan");
if (typeof x !== typeof undefined && x !== false) {
restricted = parseInt(restricted) + parseInt(x);
}
else{
restricted = restricted + 1;
}
flag = 0;
}
}
counter++;
});
});