JSFiddle - React, Tailwind, and code Playground
HTML
<table id="demo-table">
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
CSS
table, table tr {
border: none;
}
table td {
border: 1px;
background: #ccc;
padding: 0px;
width: 60px;
height: 28px;
}
table td.cell {
height: 60px;
}
table td.selected {
background: blue;
}
JavaScript
$('#demo-table td').on('click', function (event) {
event.preventDefault();
selectCell(this);
}).each(function() {
if (!$(this).is('[rowspan]')) return;
var i = +$(this).attr('rowspan');
var $nextRow = $(this).parent('tr');
while (($nextRow = $nextRow.next()) && --i > 0) {
$nextRow.prepend('<td style="display:none;"></td>');
}
});
function selectCell(item){
var cell = item.parentNode,
table = cell.parentNode,
rowPos = cell.rowIndex,
colPos = item.cellIndex;
$(table).find('td').removeClass('selected');
for(r = rowPos; r < table.rows.length; r++) {
for(c = colPos; c < table.rows[r].cells.length; c++) {
jQuery(table.rows[r].cells[c]).addClass("selected");
}
}
console.log(table);
}