Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

ponerle color a una tabla con Javascript

preguntó
Web
853 Vistas
1 Respuestas
solucionada

Hola, buenos dias, tengo esta tabla:

<div id="content">
  <h1> Tabla de Ejemplo </h1>

  <br>
  <div align="center" style="width:416px;" >
            <button id="bt_add" class="btn btn-primary">Agregar</button>
            <button id="bt_del" class="btn btn-primary">Eliminar</button>
            <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
             </div>
            <table id="tabla" style= "position:absolute;top:150px;left:75px" class="table table-bordered">

    <thead>
      <tr>
        <th>Nº</th>
        <th>NOMBRE</th>
        <th>AREA</th>
        <th>PUESTO</th>
        <th>EMAIL</th>
      </tr>
    </thead>
  </table>
</div>

Y lo que me gustaría es darle color, NO CON CSS, quiero darle color con Javascript, por ejemplo que las filas sean de color verde y el encabezado de color rojo ,alguna idea?

por rojo (350 puntos) en Web

1 Respuesta

2votos

rojo Puntos350

Ya descubrí como:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
<body>
<table id=”tabla1″ style="width:100%;">

  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<script type="text/javascript">

//var a=document.getElementsByClassName("blue1");
//for (var i=0; i<a.length; i++) a[i].style.backgroundColor="blue";
//var a=document.getElementsByClassName("red1");
//for (var i=0; i<a.length; i++) a[i].style.backgroundColor="red";
//var a=document.getElementsByClassName("green1");
//for (var i=0; i<a.length; i++) a[i].style.color="green";

var ths = document.getElementsByTagName("th");

for (var i = 0; i < ths.length; i++) {

  ths[i].style.color = "purple";

}

var tds = document.getElementsByTagName("td");

for (var i = 0; i < tds.length; i++) {

  tds[i].style.color = "red";

}

</script>
</body>
</html>
por rojo (350 puntos)
seleccionada por

1voto

Peter comentado

Si esta es la solución, por favor selecciona la respuesta como correcta.

Saludos.

por Peter (150.480 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta