3

Tengo esta tabla:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
<table 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>

Lo que me gustaría es darle color, NO con CSS o HTML, ya que se usarlos, pero no se usar JavaScript por eso quiero darle color por medio de ese lenguaje, por ejemplo que las filas sean de color verde y el encabezado de color rojo.

4
  • 1
    Hola Reinos, podrías explicar porque exactamente no con CSS? Commented el 25 jul. 2017 a las 15:22
  • Hola, @CarlosMuñoz me refiero que en mi tabla pueda darle color a las filas y columnas pero sin necesidad de usar CSS. Que sea con puro codigo JavaScript... Saludos
    – Reinos Ric
    Commented el 25 jul. 2017 a las 15:33
  • Como mera curiosidad, ¿Por qué no quieres usar CSS? Antes de entrar en las broncas de usar JS para hacer tus estilos...
    – Yikarus
    Commented el 25 jul. 2017 a las 15:41
  • 1
    Precisamente esa es mi pregunta porque con Javascript y no con CSS? Si los colores son estáticos no hay necesidad de usar JavaScript Commented el 25 jul. 2017 a las 15:42

3 respuestas 3

5

Con JS puedes decir que todas las cabeceras th sean con fondo rojo y las celdas td sean verdes. Supongo que no queriendo usar CSS te refieras a no modificar el archivo .css pero aun con JS tienes que usar los estilos css.

Coges todos los elemenentos td o th con getElementsByTagName e iteras por ellos.

Si lo que quieres no es el color de fondo, si no el color de letra, no es backgroundColor sino color.

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

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

  ths[i].style.backgroundColor = "red";

}

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

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

  tds[i].style.backgroundColor = "green";

}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
<table 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>

11
  • 1
    Hola, el OP no ha especificado que usa jQuery ni en el contenido del post ni en las etiquetas, por lo que las respuestas se esperan en javascript puro Commented el 25 jul. 2017 a las 15:26
  • 2
    Hola @user2930137. Yo lo interpreto al revés. Jquery es javascript. y a menos que diga que no quiere nada de librerias externas, por qué no?
    – lois6b
    Commented el 25 jul. 2017 a las 15:29
  • De hecho @user2930137 me entendio, quiero Javascript puro.. Saludos
    – Reinos Ric
    Commented el 25 jul. 2017 a las 15:37
  • @ReinosRic cachis... bueno, estoy modificandolo ahaha
    – lois6b
    Commented el 25 jul. 2017 a las 15:39
  • 1
    @lois6b, es simple, si en las etiquetas o en el contenido el OP no indica cierta tecnología entonces normalmente no habría porqué incluirla en una respuesta. Saludos! Commented el 25 jul. 2017 a las 15:54
3

En javascript puro,

Usando elemento.getElementsByTagName(tag) para obtener la lista de los tag en este caso son th y td

Esto me devuelve un array de todos los tag en el documento, entonces para agregarselo a todos, itero en estos con un ciclo for y le agrego el color con el metodo setAttribute(atributo,valor)

Si quieres que NO, se aplique a toda el documento, sino solo un div en donde se encuentren esos tag, pues envez de hacer document..getElementsByTagName(tag), reemplazas el 'document' por tu elemento, por ejemplo:

var div1 = document.getElementById("miDiv");


var titulos = div1.getElementsByTagName("TH");
 var titulos2 = div1.getElementsByTagName("TD");
  var t1 = titulos.length,t2=titulos2.length;
 
 for(var i=0;i<t1;i++) {
 titulos[i].setAttribute('style','color: red');
 }
  for(var i=0;i<t2;i++) {
 titulos2[i].setAttribute('style','color: green');
 }
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="miDiv">
<table 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>
</div>

<div id="miDiv2">
<table 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>
</div>

Y en lo que respecta a tu codigo aqui esta:

var titulos = document.getElementsByTagName("TH");
 var titulos2 = document.getElementsByTagName("TD");
  var t1 = titulos.length,t2=titulos2.length;
 
 for(var i=0;i<t1;i++) {
 titulos[i].setAttribute('style','color: red');
 }
  for(var i=0;i<t2;i++) {
 titulos2[i].setAttribute('style','color: green');
 }
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table 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>

OJO: Es una bien sabido, que mejora el rendimiento guardar el .length en una variable externa

4
  • Gracias, pero por ejemplo, si quiero que la palabra john este de color rojo como lo modificaría, por , por que tengo entendido que son bidireccionales no?
    – Reinos Ric
    Commented el 25 jul. 2017 a las 15:54
  • ¿Por qué cargas jQuery en uno de los snippets? No tiene sentido, por un lado porque ese snippet no hace uso de jQuery, por otro lado, la pregunta no hace mención alguna de jQuery.
    – Rubén
    Commented el 25 jul. 2017 a las 16:05
  • y por otro lado, no afecta en nada cargar jquery, ni siquiera tu critica es constructiva
    – ESCM
    Commented el 25 jul. 2017 a las 20:26
  • No me llegó notificación de tu comentario. Favor de revisar ¿Cómo funcionan las @respuestas en los comentarios?. En relación a que no afecta en nada, estas equivocado, pero parece que estás a la defensiva y por ende poco receptivo. Si tu actitud cambia avísame o mejor aún, publica una pregunta sobre el efecto de cargar una librería que no se ocupa, así tendrías oportunidad de recibir el punto de vista de alguien más.
    – Rubén
    Commented el 25 jul. 2017 a las 21:22
1

En Primeros pasos en la Web se explica el propósito moderno de incluir HTML, CSS y JavaScript cuando se desarrolla una página web.

Si no hay un motivo para hacer dinámica una página web y no se desea usar CSS, entonces, podríamos decir que lo que estás buscando se puede lograr usando "HTML puro".

A continuación se presenta el caso usar el atributo bgcolor para dar color a las filas, rojo para el encabezado, verde para las demás, dejando el CSS original intacto.

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
<table style="width:100%">
  <tr bgcolor="red">
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr bgcolor="green">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr bgcolor="green">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr bgcolor="green">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

2
  • No veo porque utilizas HTML, cual sea el motivo, claramente dijo NO con CSS o HTML, se asume que si dice eso, es porque YA SABE hacerlo en html o css
    – ESCM
    Commented el 25 jul. 2017 a las 20:28
  • @EduardoSebastian: Mi respuesta es previa la revisión en la que el OP agregó que no quiere usar HMTL puro. Luego veré si la actualizo o la elimino.
    – Rubén
    Commented el 25 jul. 2017 a las 20:45

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.