Multi column table in Javascript using DOM

Question

I need to output a multi column table that reads left to right. The table image shows how it should look with just the first few toys. I have to output the table using the DOM node. I also need to generate a sequential code number in the code column. I have been racking my brain over this so any help would be appreciated.

image of table

var productsArr = new Array('ToyA', 'ToyB', 'ToyC', 'ToyD', 'ToyE', 'ToyF', 'ToyG', 'ToyH');
var pricesArr = new Array(18.70, 11.95, 39.95, 49.95, 54.65, 32.10, 18.70, 11.95);

for (var i = 0; i < productsArr.length; i++) {

  document.writeln('<table border="1">');

  document.writeln('<tr>');
  document.writeln('<th>Code</th>');
  document.writeln('<th>Product</th>');
  document.writeln('<th>Price</th>');
  document.writeln('</tr>');

  document.writeln('<tr>');
  document.write("<td>Generate Number</td>" + "<td>" + productsArr[i] + "</td>" + "<td>" + pricesArr[i] + "</td>")
  document.writeln('</tr>');
  document.writeln('</table>');
}

Please forget that document.write ever existed and learn to use DOM functions like document.createElement and document.addChild. Your code is from the 90's. — Barmar
– Barmar, Commented Apr 23, 2016 at 5:26

sonjz · Accepted Answer · 2016-04-23 04:53:32Z

1

Depends on your id or number, this one is random...

document.write(
  "<td>" + Math.floor(Math.random() * 10000000) + "</td>" +
  "<td>" +    productsArr[i] + "</td>" +
  "<td>" + pricesArr[i] + "</td>"
);

This is sequential...

document.write(
  "<td>" + i + "</td>" +
  "<td>" +    productsArr[i] + "</td>" +
  "<td>" + pricesArr[i] + "</td>"
);

answered Apr 23, 2016 at 4:53

sonjz

5,1404 gold badges44 silver badges62 bronze badges

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

1 Comment

ClarenceSmid Over a year ago

Thanks Sonjz. I used the sequential solution. Works great.

Collectives™ on Stack Overflow

Multi column table in Javascript using DOM

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related