De acuerdo a tu código debes definir la tabla y definir la fila(s) (rows[]
) y columna(s) (cells[]
) de la celda que deseas cambiar de color.
Ejemplo, en este caso pintara la celda ubicada en el primer renglón rows[0]
, segunda columna cells[1]
:
//document.getElementById('celda-a-pintar').style.backgroundColor = "blue"
document.getElementById('table').rows[0].cells[1].style.backgroundColor = "blue";
De acuerdo a lo anterior ahora un ejemplo en el cual detecta la celda y la hace cambiar de color:
$(document).ready(function(){
$('#table').on( 'click', 'td', function () {
row = $(this).closest("tr").index();
col = $(this).closest("td").index();
document.getElementById('table').rows[row].cells[col].style.backgroundColor = "blue";
console.log("pinta renglon: " + row + " columna: " + col);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<table id="table" border="1">
<tr>
<td id="celda-a-pintar"> </td>
<td id="celda-a-pintar2"> </td>
<td id="celda-a-pintar3"> </td>
<td id="celda-a-pintar4"> </td>
<td id="celda-a-pintar5"> </td>
</tr>
</table>
</html>