How to embed a for-loop in a table in JavaScript?

Question

I have to generate a sequence with a difference of 9. starting from 7. sequence should have 20 terms. I have tested my for loop and its working fine. Question is, how do I embedd this for loop in a table in javascript? Just want the table to have one column (sequence in for loop)

<script type="text/javascript">
 var i;
 var p;

 for (i = 0; i < 20; i++) {
   p = i * 9 + 7;
   document.writeln(p + "<br>");
 }
</script>

First of don't use `document.write`. Open you browser's Developer Tools and read your errors. — Roko C. Buljan, Oct 10 '18 at 19:14

score 0 · Answer 1 · answered Oct 10 '18 at 19:19

Use a loop to create the relevant HTML element objects and set their values within your Javascript:

var table = document.createElement("table");

var i;
var p;

for (i = 0; i < 20; i++) {
  var row = document.createElement("tr");
  var row_data = document.createElement("td");
  p = i * 9 + 7;
  row_data.innerHTML = p;
  row_data.style = "border: 1px solid black";
  row.appendChild(row_data);
  table.appendChild(row);
}

document.body.appendChild(table);

same happened with me :/, like someone was just waiting for it — Umair Abid, Oct 10 '18 at 19:23

Umair Abid · Answer 2 · 2018-10-10T19:34:01.650

0

Declare a table in html and give it an id

<table id="table"></table>

Then, get that table in your javascript and add one row, column in each iteration

<script type="text/javascript">
 var i;
 var p;
 var table = document.getElementById("table");
 for (i = 0; i < 20; i++) {
   p = i * 9 + 7;
   table.innerHTML = `${table.innerHTML}<tr><td>${p}</td></tr>`;
 }
</script>

edited Oct 10 '18 at 19:34

answered Oct 10 '18 at 19:22

Umair Abid

1,453
2
18
35

Not sure what's going on with the serial downvotes flying around, but at first glance this is also another valid solution. – esqew Oct 10 '18 at 19:24
@esqew this answer throws an error. it is simply incorrect. – Kevin B Oct 10 '18 at 19:28
innerHTML is a rather poor tool for this. – Kevin B Oct 10 '18 at 19:34
considering the problem, I think manually creating nodes might be an overkill – Umair Abid Oct 10 '18 at 19:35
i mean... it's better than re-inserting the entire content table on each iteration. – Kevin B Oct 10 '18 at 19:40
@UmairAbid I didn't understand table.innerHTML line.. Is that a dollar sign and a single quotes? – Nimra Asif Oct 11 '18 at 00:03
@NimraAsif its called string interpolation https://stackoverflow.com/questions/1408289/how-can-i-do-string-interpolation-in-javascript – Umair Abid Oct 11 '18 at 14:15

Piterden · Answer 3 · 2018-10-10T19:28:30.833

-2

let table = '<table><tbody>';

for (let i = 0; i < 20; i++) {
  table += (`<tr><td>${i}</td><td>${i * 9 + 7}</td></tr>`);
}

table += '</tbody></table>';

document.body.innerHTML = table;

Array.from(document.getElementsByTagName('td'))
  .forEach((td) => {
    td.style.border = '1px solid green';
    td.style.width = '40px';
    td.style.textAlign = 'right';
    td.style.paddingRight = '20px';
  });
  
Array.from(document.getElementsByTagName('table'))
  .forEach((table) => {
    table.style.border = '2px solid';
  });

edited Oct 10 '18 at 19:28

answered Oct 10 '18 at 19:18

Piterden

771
5
17

2

OP has asked for the output to be in a table format. – esqew Oct 10 '18 at 19:18
seems complicated when compared to simplicity of the problem, see @esqew solution – Umair Abid Oct 10 '18 at 19:26

How to embed a for-loop in a table in JavaScript?

3 Answers3