JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1" cellspacing="0">
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>A1</td>
<td colspan="2">B1</td>
<td class="stuffing"></td>
<td rowspan="3">D1</td>
</tr>
<tr>
<th>2</th>
<td rowspan="2" colspan="2">A2</td>
<td class="stuffing"></td>
<td>C2</td>
<td class="stuffing"></td>
</tr>
<tr>
<th>3</th>
<td class="stuffing"></td>
<td class="stuffing"></td>
<td>C3</td>
<td class="stuffing"></td>
</tr>
<tr>
<th>4</th>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">XYZ</td>
<td class="stuffing"></td>
<td class="stuffing"></td>
<td class="stuffing"></td>
<td class="stuffing"></td>
</tr>
</tfoot>
</table>
CSS
.stuffing {
display: none;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
JavaScript
var tb = document.querySelector("table");
// simple
tb.rows[1].cells[2].className = "blue";
function getCellLocation(cell) {
return {row:cell.parentNode.rowIndex, cell:cell.cellIndex}
}
// smart
function getSmartCell(table, row, col) {
var cell = table.rows[row].cells[col];
if (cell.className != "stuffing") return cell;
// traverse Left
while ((row>0) && (col>0) && (cell.className == "stuffing")) {
cell = table.rows[row].cells[--col];
}
// roll back one cell if no colSpan is found
if (cell.colSpan == 1) cell = table.rows[row].cells[++col];
// traverse Up
while ((row>0) && (col>0) && (cell.className == "stuffing")) {
cell = table.rows[--row].cells[col];
}
return cell;
}
var rr = 3; // [3,2] is a hidden cell
var cc = 2;
//console.log(tb.rows[rr].cells[cc]);
//console.log(getSmartCell(tb,rr,cc));
getSmartCell(tb,rr,cc).className = "red"