0

pre html タグを使用して、フォーマットするコードを含めようとしています。既存の pre タグからコードを取得し、コードを含むテーブルを作成してからフォーマットします。しかし、テキストを含む td 要素を作成するたびに、代わりに空のテーブルが作成されます。私のコードは次のとおりです。

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>

これにより、次のようなものが生成されます。

コードの結果

2 行目のような空のテーブルが 4 行目、6 行目、8 行目にあります。

4

2 に答える 2

1

問題は、NodeList を使用していることです。

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

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

NodeList は「ライブ」コレクションです。つまり、変化します。最初に pre タグが 1 つあるため、pres.length1 が返されます。ただし、ループ内で pre タグを追加します。だからpres.length変化も。したがって、ループは何度も実行されます。

于 2013-03-12T09:52:23.833 に答える
0

さて、私は自分で問題の答えを見つけました。

どうやら、何らかの形で、ライン

elem.parentNode.replaceChild(ourTable, elem);

必要以上に実行されたため、新しく作成されたpre-elementにclass ='code'プロパティが設定されていなかったため、新しく作成されたpre-elementが空のテーブルに置き換えられました。

その一行を

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

それの外ではなく、私の問題を修正しました。

于 2013-03-12T09:38:55.933 に答える