Give color with JavaScript

Question

Give color with JavaScript

Navigation

#1 by (6 votes)
#2 by (3 votes)
#3 by (1 votes)

3

I have this table:

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>

What I would like is to color it, NO with CSS or HTML, since they are used, but I would not use JavaScript so I want to color it by means of that language, for example that the rows are green and the header red.

javascript html

asked by Reinos Ric 25.07.2017 в 17:16

source

3 answers

3

In pure javascript,

Using elemento.getElementsByTagName(tag) to get the list of the tags in this case are th and td

This returns an array of all the tags in the document, then to add it to all, but in these with a for cycle and I add the color with the method setAttribute(atributo,valor)

If you want NO, apply to the entire document, but only a div where those tags are found, because instead of doing document..getElementsByTagName(tag) , you replace the 'document' for your element, for example:

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>

And in regards to your code here is:

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>

EYE: It's a well-known fact that it improves performance by saving the .length to an external variable

answered by 25.07.2017 в 17:42

1

First Steps on the Web explains the modern purpose of including HTML, CSS and JavaScript when a web page is developed.

If there is no reason to dynamize a web page and you do not want to use CSS, then we could say that what you are looking for can be achieved using "pure HTML".

The following is the case to use the attribute bgcolor to give color to the rows, red for the header, green for the others, leaving the original CSS intact.

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>

answered by 25.07.2017 в 18:00

Problem with NetBeans, it does not let me create or open projects How do I avoid the line breaks when I enter a number?

score 6 · Accepted Answer

With JS you can say that all headers th are with red background and cells td are green. I guess not wanting to use CSS you mean you do not modify the file .css but even with JS you have to use the css styles.

You take all items td or th with getElementsByTagName and iterate through them.

If what you want is not the background color, but the font color, it is not backgroundColor but 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>