Skip to main content
se añadieron 565 caracteres en el cuerpo
Origen Enlace
Jorgesys
  • 111.1k
  • 14
  • 55
  • 134

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 = "#0000FF";"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>

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 = "#0000FF";

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>

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>

se añadieron 565 caracteres en el cuerpo
Origen Enlace
Jorgesys
  • 111.1k
  • 14
  • 55
  • 134

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[0]cells[1].style.backgroundColor = "#0000FF";

Ejemplo,De acuerdo a lo anterior ahora un ejemplo en este caso pintarael cual detecta la celda ubicada en el primer renglón rows[0], segunda columna cells[1]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[0]rows[row].cells[1]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>

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.

 //document.getElementById('celda-a-pintar').style.backgroundColor = "blue"
 document.getElementById('table').rows[0].cells[0].style.backgroundColor = "#0000FF";

Ejemplo, en este caso pintara la celda ubicada en el primer renglón rows[0], segunda columna cells[1]:

document.getElementById('table').rows[0].cells[1].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>

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 = "#0000FF";

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>

Origen Enlace
Jorgesys
  • 111.1k
  • 14
  • 55
  • 134

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.

 //document.getElementById('celda-a-pintar').style.backgroundColor = "blue"
 document.getElementById('table').rows[0].cells[0].style.backgroundColor = "#0000FF";

Ejemplo, en este caso pintara la celda ubicada en el primer renglón rows[0], segunda columna cells[1]:

document.getElementById('table').rows[0].cells[1].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>