Javascript CreateElement創建空表

我試圖使用pre html標記來包含一些代碼，我將格式化。我從預先存在的預標籤中獲取代碼，並創建一個包含代碼的表格，然後將其格式化。但是每隔一段時間我創建一個td元素，並在其中包含一些文本，則會創建一個空表。我的代碼如下：Javascript CreateElement創建空表

function init() { 
    var pres = document.getElementsByTagName('pre'); 

    for (var i = 0; i < pres.length; i++) { 
     var elem = pres[i]; 
     var ourTable = document.createElement('table'); 

     if (elem.className.toLowerCase() == 'code') { 
      var lineCount = 1; 
      var linesOfText = elem.innerHTML.split(/\r|\n/); 

      for (var j = 0; j < linesOfText.length; j++) { 
       var ourRow = document.createElement('tr'); 
       var lineNumberTd = document.createElement('td'); 
       var lineNumberNode = document.createTextNode(lineCount); 
       lineNumberTd.appendChild(lineNumberNode); 

       ourRow.appendChild(lineNumberTd); 

       var code = linesOfText[j]; 

       var codeTd = document.createElement('td'); 
       var ourPre = document.createElement('pre'); 
       ourPre.innerHTML = code; 
       codeTd.appendChild(ourPre); 
       ourRow.appendChild(codeTd); 

       lineCount++; 
       ourTable.appendChild(ourRow); 
      } 
     } 

     elem.parentNode.replaceChild(ourTable, elem); 
    } 
} 
window.onload = init;

而我的HTML是如下：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <link rel="stylesheet" href="DefaultStyle.css" /> 
    <title>Autoformatter</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <pre class="code"> 
         while (!stop) 
      { 
       while (packetQueue.Count > 0) 
       { 
        HandlePacket(packetQueue.Dequeue()); 
       } 
      } 
     </pre> 
     </div> 
    </form> 
    <script type="text/javascript" src="PrimaryScript.js" ></script> 
</body> 
</html>

，這產生這樣的：

result of the code

有喜歡的一個空表在第4，第6和第8行的第2行。

來源

2013-03-12 Loyalar

這裏是你的代碼[jsfiddle]（http://jsfiddle.net/NYJ4Q/1/）。 – Simon 2013-03-12 09:29:09

對我來說，它就像你期待的那樣。 – 2013-03-12 09:31:09

@Simon - 哦，謝謝，那真是太酷了。 – Loyalar 2013-03-12 09:31:11

的問題是，您使用的是節點列表：

var pres = document.getElementsByTagName('pre'); 

for (var i = 0; i < pres.length; i++) {

的NodeLists是「活」的集合，這是他們改變。在開始時你有一個預標籤，所以pres.length返回1.但是在循環中添加預標籤。所以pres.length也改變。因此你的循環一次又一次地運行。

來源

2013-03-12 09:52:23 zeroflagL

好的，所以我自己想出了這個問題的答案。

顯然，在某些方面，該行

elem.parentNode.replaceChild(ourTable, elem);

得到了比它應該運行多次，因此，它與一個空表更換新的由預製件，因爲新的由預製件做沒有class ='code'屬性集。

把該單一行成

if (elem.className.toLowerCase() == 'code') {

，而不是外面，固定我的問題。

來源

2013-03-12 09:38:55 Loyalar

Javascript CreateElement創建空表

回答

相關問題