Dynamically creating a table using JavaScript

Question

I'm writing a script which creates a table with 4 columns. The columns are N, N * 10, N * 100 and N * 1000. I managed to create the first two columns, but now I'm stuck. How should I refactor my code?

var n;
var m1 = 10;
var m2 = 100;
var m3 = 1000;

document.writeln("<table>");
document.writeln("<h1>Calculating Compound Interest</h1>");
document.writeln("<thead><tr><th>N</th>");
document.writeln("<th>N * 10</th>");
document.writeln("<th>N * 100</th>");
document.writeln("<th>N * 1000</th>");
document.writeln("</tr></thead><tbody>");

for (var number = 1; number <= 5; number++) {
    n = number * m1;

    if (number % 2 !== 0)
        document.writeln("<tr class='oddrow'><td>" + number +
                         "</td><td>" + n.toFixed(0) + "</td></tr>");
    else
        document.writeln("<tr><td>" + number +
                         "</td><td>" + n.toFixed(0) + "</td></tr>");
}

document.writeln("</tbody></table>");

You've got this far - I think you should be able to figure it out. — user1864610
– user1864610, Commented Oct 2, 2013 at 3:37
You can use arrays to hold the multipliers and loop through and calculate -- jsfiddle.net/9ztbS — dchhetri
– dchhetri, Commented Oct 2, 2013 at 3:49
Please consider a template based databinding solution instead of manually looping out dynamic html. Look into Jquery templates, KnockoutJs or similar — TGH
– TGH, Commented Oct 2, 2013 at 3:57
@TGH Not every Javascript question requires JQuery. There is nothing wrong with looping using standard language constructs. — user764357
– user764357, Commented Oct 2, 2013 at 4:04
@LegoStormtroopr I understand that not every project uses or want to use other frameworks, but as soon as you need something beyond the simplest case you are starting to get code that is very hard to maintain. That is where data binding and template frameworks can help you out — TGH
– TGH, Commented Oct 2, 2013 at 4:06

Afshin · Accepted Answer · 2013-10-02 03:50:10Z

1

change your for loop to following:

for ( var number = 1; number <= 5; ++number )
 {
    n = number * m1;
    if ( number % 2 !== 0 )
       document.writeln( "<tr class='oddrow'><td>" + number + "</td>");
    else
       document.writeln( "<tr><td>" + number + "</td>");

    document.writeln("<td>" + n.toFixed(0) + "</td>" );
    n = number * m2;
    document.writeln("<td>" + n.toFixed(0) + "</td>" );
    n = number * m3;
    document.writeln("<td>" + n.toFixed(0) + "</td></tr>" );
  }

answered Oct 2, 2013 at 3:50

Afshin

1,25412 silver badges29 bronze badges

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

Comments

Sami · Accepted Answer · 2013-10-02 04:13:52Z

You have to add two more td's where you will put the result of number*2 and number*m3

Also I would recommend you using innerHTML to write complete desired html rather than using document.writeIn every time

See The Solution on js fiddle

 var n; 
 var m1 = 10;
 var m2 = 100;
 var m3 = 1000;

var heading_html = "<h1>Calculating Compound Interest</h1>" ;     
var tbable_html = "<table border=1>"; 

tbable_html +=   "<thead><tr><th>N</th>";
tbable_html +=  "<th>N*10</th>";
tbable_html +=  "<th>N*100</th>";
tbable_html +=  "<th>N*1000</th>";
tbable_html +="</tr></thead><tbody>";
for (var number = 1; number <= 5; ++number) {
    n1 = number * m1; 
    n2 = number * m2;
    n3 = number * m3;
    if (number % 2 !== 0)
        tbable_html +="<tr class='oddrow'><td>" + number + "</td><td>" +
n1.toFixed(0)+"</td><td>"+n2.toFixed(0)+"</td><td>"+n3.toFixed(0)+"</td></tr>";
    else
        tbable_html +="<tr><td>" + number + "</td><td>" + n1.toFixed(0) +
"</td><td>" + n2.toFixed(0) + "</td><td>" + n3.toFixed(0) + "</td></tr>";
}
tbable_html +="</tbody></table>";

document.write(heading_html+tbable_html);

Aadit M Shah · Accepted Answer · 2013-10-02 04:16:07Z

Try this:

var n = [1, 2, 3, 4, 5].reduce(function (string, n) {
    return string + "<tr class='" + (n % 2 ? "oddrow" : "evenrow") + "'>" +
           [n, 10 * n, 100 * n, 1000 * n].reduce(td, "") + "</tr>";
}, "");

document.body.innerHTML += "<table><thead><tr>" +
    "<th>N</th><th>N * 10</th><th>N * 100</th><th>N * 1000</th>" +
    "</tr></thead><tbody>" + n + "</tbody></table>";

function td(string, n) {
    return string + "<td>" + n + "</td>";
}

See the demo: http://jsfiddle.net/7uPVH/

If you don't want to use .reduce then you could rewrite the above code as follows:

var n = "";

for (var i = 1; i <= 5; i++) {
    n += "<tr class='" + (i % 2 ? "oddrow" : "evenrow") + "'>";

    n += "<td>" + i + "</td>";
    n += "<td>" + 10 * i + "</td>";
    n += "<td>" + 100 * i + "</td>";
    n += "<td>" + 1000 * i + "</td>";

    n += "</tr>";
}

document.body.innerHTML += "<table><thead><tr>" +
    "<th>N</th><th>N * 10</th><th>N * 100</th><th>N * 1000</th>" +
    "</tr></thead><tbody>" + n + "</tbody></table>";

See the demo: http://jsfiddle.net/7uPVH/1/

Collectives™ on Stack Overflow

Dynamically creating a table using JavaScript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related