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创建空表

回答

相关问题