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