0

我正在编写一个脚本，它创建一个包含 4 列的表。列是N、N * 10和N * 100。N * 1000我设法创建了前两列，但现在我被卡住了。我应该如何重构我的代码？

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>");
4

3 回答 3

1

将您的 for 循环更改为以下内容：

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>" );
  }
于 2013-10-02T03:50:10.673 回答
0

您必须再添加两个 td，您将在其中放置number*2andnumber*m3

另外，我建议您使用 innerHTML 来编写完整的所需 html，而不是document.writeIn每次都使用

请参阅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);
于 2013-10-02T04:08:20.447 回答
0

尝试这个：

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>";
}

查看演示：http: //jsfiddle.net/7uPVH/

如果你不想使用，.reduce那么你可以重写上面的代码如下：

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>";

查看演示：http: //jsfiddle.net/7uPVH/1/

于 2013-10-02T04:16:07.757 回答