Skip to main content
Eliminar líneas de jQuery comentadas.
Origen Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85

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.

//$("th").css('background-color', 'red');

//$("td").css('background-color', 'green');

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>

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.

//$("th").css('background-color', 'red');

//$("td").css('background-color', 'green');

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>

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>

se añadieron 323 caracteres en el cuerpo
Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54

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 Peroaun con JS tienes que usar indirectamente 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.

//$("th").css('background-color', 'red');

//$("td").css('background-color', 'green');

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>

Con JS puedes decir que todas las cabeceras th sean con fondo rojo y las celdas td sean verdes. Pero tienes que usar indirectamente 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.

//$("th").css('background-color', 'red');

//$("td").css('background-color', 'green');

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>

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.

//$("th").css('background-color', 'red');

//$("td").css('background-color', 'green');

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>

se añadieron 323 caracteres en el cuerpo
Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54

Con JS puedes decir que todas las cabeceras th sean con fondo rojo y las celdas td sean verdes. Pero tienes que usar indirectamente 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.

//$("th").css('background-color', 'red');

//$("td").css('background-color', 'green');

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;
}
<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>

Con JS puedes decir que todas las cabeceras th sean con fondo rojo y las celdas td sean verdes. Pero tienes que usar indirectamente los estilos css.

$("th").css('background-color', 'red');

$("td").css('background-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>

Con JS puedes decir que todas las cabeceras th sean con fondo rojo y las celdas td sean verdes. Pero tienes que usar indirectamente 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.

//$("th").css('background-color', 'red');

//$("td").css('background-color', 'green');

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>

Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54
Loading