Javascript html表格不顯示

我一直試圖在一張表中使用javascript來總計一個die roll列表（對的總和），以避免在我的html頁面中硬編碼11行並在js中分別訪問每行文件來添加值。所以我用一個循環和document.writeln（）以更緊湊的方式做到這一點，但輸出不顯示錶或任何東西。Javascript html表格不顯示

document.writeln("<table border=\"1\"><thead><tr><th>Sum of Dice</th><th>Total Times Rolled</th></tr></thead><tbody>"); 
for (var i=0; i < 11; i++) 
{ 
    document.writeln("<tr><td>2</td><td></td></tr>"); 
} 
document.writeln("</tbody></table>");

該行不都應該有2開始，我只用這個數字作爲一個測試，並在for循環是，我已經有一個數組的總數第二的標籤，但我的問題是與顯示桌子。

來源

2013-03-21 AuthenticReplica

請檢查您的控制檯錯誤。另外'document.write（）'不是你可以用於這樣的任務的函數。 – Teemu 2013-03-21 16:58:57

嗯 - 你的代碼似乎只是[罰款]（http://jsfiddle.net/wcJ7u/）。你在哪裏測試它？ – Adidi 2013-03-21 17:00:08

ewww。 Oldskool，你有沒有考慮過使用模板引擎？ – Blowsie 2013-03-21 17:00:24

試試這個：

<script> 
     var code = ""; 
     function write(){ 
      code += "<table border=\"1\"><tr><th>Sum of Dice</th><th> Total Times Rolled</th></tr>"; 
      for (var i = 0; i < 11; i++){ 
       code += "<tr><td>2</td><td></td></tr>"; 
      } 
      code += "</table>"; 
      document.body.innerHTML = code; 
     } 
    </script>

而且`噸忘記把這段代碼HTML：

<body onload="write()">

這裏有結果：

enter image description here

來源

2013-03-21 17:01:09

你確定嗎？此片段可確保文檔的所有以前的內容都被清除。請檢查[本MDN文章]（https://developer.mozilla.org/en-US/docs/DOM/document.write）。 – Teemu 2013-03-21 17:03:35

看一看圖片 – 2013-03-21 17:07:38

運行此程序後，請查看您頁面的真實源代碼; ）。 – Teemu 2013-03-21 17:09:19

我想用整個一堆HTML文本字符串通過writeln創建表通常不是一個好主意。我建議通過Javascript創建表格DOM元素並將其附加到包裝元素。

var headerContent = ['Sum of Dice', 'Total Times Rolled']; 
var table = document.createElement('table'), 
    header = table.createTHead(), 
    row, 
    cell; 

table.border = 1; 

// construct header 
row = header.insertRow(0); 
for (var i = 0, len = headerContent.length; i < len; i++) { 
    cell = row.insertCell(i); 
    cell.innerHTML = headerContent[i]; 
} 

// construct table content 
for (var i = 0; i < 11; i++) { 
    row = table.insertRow(i + 1); 
    for (var j = 0, len = headerContent.length; j < len; j++) { 
     cell = row.insertCell(j); 
     cell.innerHTML = '2'; 
    } 
} 

// add table element to the dom tree 
var wrapper = document.getElementById('wrapper'); 
wrapper.appendChild(table);

見http://jsfiddle.net/LgyuE/

來源

2013-03-21 17:33:21 Rex

哇這是荒謬的，它適用於jsfiddle，但不在我的文件中：/ 我在我的html文件的head元素中加載js，我應該在另一個辦法？ – AuthenticReplica 2013-03-21 18:01:33

加載dom元素時執行此代碼（當onload事件觸發或$時。ready（）如果你使用jQuery），否則把它放在你的wrapper元素之後。 – Rex 2013-03-21 18:42:05

Javascript html表格不顯示

回答

相關問題