Format table generated with .js file in Javascript

Question

I have a table that is generated with data from a .js file. What I want to do is be able to format rows ex. give them different color. I know you can add a class like <tr class="yellowrow"></tr> but the way the code is I can't do it like that. I'm thinking a for loop might do.. any ideas?

<table id="data">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<script type="text/javascript" src="js/people.js"></script>//file with information
<script type="text/javascript"  >
        for(var i=0; i<Name.length;i++){
document.write('<tr><td>' + date[i] + '</td><td>' + amount[i] + '</td><td>'            
+Name[i]'</td></tr>');//this brings in the data to generate the rows
}
</script>
</tbody>
//so this gives me a table with a couple of rows... how can i format each row they   
need to have different classes because they cant all have the same format.like one 
can be blue, another red, another blue..ect.

Community · Accepted Answer · 2017-05-23 12:03:41Z

1

Short answer: You can use CSS to style the different rows.

tr:nth-child(2n){
  background-color: #ccc;
}

tr:nth-child(3n){
  background-color: #444;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Long, mostly unrelated answer: You shouldn't be using document.write. You can add to the tbody a lot more elegantly like this.

<table id="data">
 ...
 <tbody></tbody>
</table>

<script>
  var rows = [];
  for (var i=0; i<Name.length; i++){
    rows.push(
      '<tr>' +
        '<td>' + date[i] + '</td>' +
        '<td>' + amount[i] + '</td>' +
        '<td>' + Name[i]  + '</td>' +
      '</tr>'
    );
  }
  document.querySelector('#data tbody').innerHTML = rows.join('');
</script>

Why is document.write considered a "bad practice"?

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Mar 4, 2014 at 19:35

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andrew · Accepted Answer · 2014-03-04 19:37:48Z

0

if your just looking to alternate the colors you could just use a css selector like:

 tr:nth-child(odd)

http://www.w3.org/Style/Examples/007/evenodd.en.html

answered Mar 4, 2014 at 19:37

andrew

9,6039 gold badges36 silver badges62 bronze badges

Collectives™ on Stack Overflow

Format table generated with .js file in Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related