使用JavaScript動態創建表格

我正在編寫一個腳本，它創建一個包含4列的表格。這些列是N,N * 10,N * 100和N * 1000。我設法創造了前兩列，但現在我被卡住了。我應該如何重構我的代碼？使用JavaScript動態創建表格

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

來源

2013-10-02 user1471038

你有這麼遠 - 我想你應該能夠弄明白。 – 2013-10-02 03:37:30

您可以使用數組來保存乘數並循環並計算 - http://jsfiddle.net/9ztbS/ – dchhetri

請考慮基於模板的數據綁定解決方案，而不是手動循環動態html。研究Jquery模板，KnockoutJs或類似的工具 – TGH

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-02 03:50:10 Afshin

謝謝Afshin我知道了:) – user1471038

你必須添加兩個TD的，你會把的number*2結果和number*m3

另外我想使用的innerHTML爲您推薦寫出完整的所需html而不是每次都使用document.writeIn

請參閱 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);

來源

2013-10-02 04:08:20 Sami

試試這個：

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-02 04:16:07

使用JavaScript動態創建表格

回答

相關問題