JavaScript表格覆蓋html文件

Question

我有一個寫作JavaScript的任務，它將創建一個表格（x列，y行......），並且我設法做到了這一點。我在寫入HTML頁面時遇到了問題。

我的代碼：

document.write('<table border = \"3\">'); 
     while(i <= y) 
     { 
     document.write('<tr>'); 
     j = 0; 
     while(j <= x) 
      { 
      if (i == 0) 
      { 
       if (j == 0) 
       { 
       document.write(' <th></th> '); 
       } 
       else    
       { 
       document.write('<th>'); 
       document.write("x = " + j); 
       document.write('</th>'); 
       }    
      } 
      else 
      { 
      if (j == 0) 
       { 
       document.write('<th>'); 
       document.write("y = " + i); 
       document.write('</th>'); 
       } 
      else 
       { 
       document.write('<td>'); 
       document.write(operation(i,j)); 
       document.write('</td>'); 
       } 
      } 
      j++; 
     } 
     document.write('</tr>'); 
     i++; 
    } 
    document.write('</table>'); 
    } 

我想這是因爲覆蓋文件撰寫的頁面？我該如何改變這一點？

Answer 1

請不要使用document.write。請參閱Why is document.write discouraged。

我認爲你使用document.write意味着它覆蓋整個頁面。如果您在加載頁面後調用該函數，則按預期工作。加載文檔後，所有對document.write的調用都會創建一個新文檔。我們更喜歡DOM操作，因爲它是一種安全的方式來直接編輯不涉及字符串操作的DOM。

將HTML編寫爲文本應留給解析HTML文件並加載它的瀏覽器。

// feature detection for cross browser compliance. 
var txt = function(node, text) { 
    if (node.innerText !== undefined) { 
     node.innerText = text; 
    } else if (node.textContent !== undefined) { 
     node.textContent = text;  
    } 
} 

function createTable(rows, columns) { 
    var table = document.createElement("table"); 
    table.border = '3'; 
    var tbody = document.createElement("tbody"); 
    var thead = document.createElement("thead"); 
    for (var i = 0; i < rows; i++) { 
     var tr = document.createElement("tr"); 
     for (var j = 0; j < columns; j++) { 
      var cell; 
      if (i === 0) { 
       cell = document.createElement("th"); 
       if (j !== 0) { 
        txt(cell, "x = " + j); 
       } 
      } 
      else { 
       if (j == 0) { 
        cell = document.createElement("th"); 
        txt(cell, "y = " + i); 
       } 
       else { 
        cell = document.createElement("td"); 
        txt(cell, operation(i, j)); 
       } 
      } 
      tr.appendChild(cell); 
     } 
     if (i === 0) { 
      thead.appendChild(tr);  
     } else { 
      tbody.appendChild(tr);  
     } 
    } 
    table.appendChild(thead); 
    table.appendChild(tbody); 

    return table; 
} 

使用DOM操作你可以像上面那樣做。可能會有一些我錯過的優化。 Live example（只測試了鉻10）

至少它按預期工作。

讓我知道你是否想看jQuery或其他DOM操作庫中的實現。就跨瀏覽器合規性而言，該代碼將會更好，更強大。

Answer 2

我在這裏看到一些問題。首先，我不相信你的代碼是適當平衡的。我相信，作爲第一步，應該更像：

<script language="javascript"> 
    document.write('<table border = \"3\">'); 
    while(i <= y) { 
     document.write('<tr>'); 
     j = 0; 
     while(j <= x) { 
      if (i == 0) { 
       if (j == 0) { 
        document.write(' <th></th> '); 
       } else { 
        document.write('<th>'); 
        document.write("x = " + j); 
        document.write('</th>'); 
       }    
      } else { 
       if (j == 0) { 
        document.write('<th>'); 
        document.write("y = " + i); 
        document.write('</th>'); 
       } else { 
        document.write('<td>'); 
        document.write(operation(i,j)); 
        document.write('</td>'); 
       } 
      } 
      j++; 
     } 
     document.write('</tr>'); 
     i++; 
    } 
    document.write('</table>'); 
    </script> 

其次，它看起來像你對我是從來沒有過實例我，而你的J做到這一點，你不這樣做就足夠早。

在生產線的同時（我< = y）的解釋基本上是看到：

while (undefined <= undefined) { 

在一定程度上，我真的不知道該document.writes真的是你最好的解決辦法，我可能會推薦使用document.createElement，但這可能更多的是個人偏好。

試圖進一步合拍的水平卻與你的方法堅持，我可能看起來向是這樣的：

function generateTable (width, height) { 
    document.write("<table border=\"3\">"); 
    var i = 1; 
    while (i <= height) { 
     document.write("<tr>"); 
     var j = 1; 
     while (j <= width) { 
      if (i == 0) { 
       // header row 
       document.write("<th>"+ j +" x "+ i +"</th>"); 
      } else { 
       document.write("<td>"+ j +" x "+ i +"</td>"); 
      } 
      j++; 
     } 
     document.write("</tr>"); 
     i++; 
    } 
    document.write("</table>"); 
} 

generateTable(5, 10);