[英]Dynamically creating a table using JavaScript
I'm writing a script which creates a table with 4 columns. 我正在编写一个脚本,该脚本创建一个包含4列的表。 The columns are
N
, N * 10
, N * 100
and N * 1000
. 列为
N
, N * 10
, N * 100
和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>");
change your for loop to following: 将您的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>" );
}
You have to add two more td's where you will put the result of number*2
and number*m3
您必须再添加两个td,然后将
number*2
和number*m3
的结果放入
Also I would recommend you using innerHTML to write complete desired html rather than using document.writeIn
every time 我也建议您使用innerHTML编写完整的所需html,而不是每次使用
document.writeIn
See The Solution on js fiddle 请参阅js小提琴上的解决方案
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);
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/ 观看演示: http : //jsfiddle.net/7uPVH/
If you don't want to use .reduce
then you could rewrite the above code as follows: 如果您不想使用
.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>";
See the demo: http://jsfiddle.net/7uPVH/1/ 观看演示: http : //jsfiddle.net/7uPVH/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.