1

mi pregunta es la seguiente tengo una tabla en html la cual se llena con unos valores aleatorios mediante js, como puedo que al dar click sobre una celda pueda pintarla de un color.

$("#celda-a-pintar").click(function(){ 
   document.getElementById('celda-a-pintar').style.backgroundColor = "blue"

}); 
<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">&nbsp;</td>
<td id="celda-a-pintar2">&nbsp;</td>

</tr>

</table>
</html>

1
  • Detecta la fila y columna de la celda y usa document.getElementById('table').rows[renglon].cells[columna].style.backgroundColor = "blue";
    – Jorgesys
    Commented el 26 jun. 2019 a las 14:27

2 respuestas 2

4

Tu problema está en el selector, estás haciendo referencia al primer td por el id. Con el siguiente selector harás referencia a todos los td de la tabla

$("#table tr td")

y para pintarlo ya que estas usando jQuery, puedes hacerlo de la siguiente manera:

$("#table tr td").click(function(){
    $(this).css("background-color", "blue");
});

$("#table tr td").click(function(){
  $(this).css("background-color", "blue");
});
<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">&nbsp;</td>
<td id="celda-a-pintar2">&nbsp;</td>

</tr>

</table>
</html>

1

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">&nbsp;</td>
    <td id="celda-a-pintar2">&nbsp;</td>
    <td id="celda-a-pintar3">&nbsp;</td>
    <td id="celda-a-pintar4">&nbsp;</td>
    <td id="celda-a-pintar5">&nbsp;</td>
    </tr>

    </table>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.