无法在 For 循环中读取 null 的属性 of 'appendchild'

Question

我有一个小型数据库，我从中检索数据并将其存储在 HTML table。

此 table 包含 3 列和 3 行。

我想要做的是通过 javascript 为每一行创建一个 div，然后在其中为 table 的该行中的每个单元格创建一个 div ]（允许我在 CSS 中设置样式）。

我创建了多个 For 循环来执行此操作，我的问题是我创建的第二个 for 循环，它执行了一次并且我收到错误 "Cannot read property 'appendChild' of null"。我不确定为什么要这样做。任何帮助将不胜感激。

var getTable = document.getElementById('projectsTable');

var rowLength = getTable.rows.length;

for (i =0; i< rowLength; i++) {
    var divName = 'projects' + i;
    block = document.createElement('div');
    block.id = divName;
    document.getElementById('javascript').appendChild(block);


    var getCells = getTable.rows.item(i).cells;

    var cellLength = getCells.length;

    for (var j = 0; j < cellLength; j++) {
        var divName2 = 'projects' + j;
        var projectInfo = 'info' + j;
        info = document.createElement('div');
        info.id = projectInfo;
        document.getElementById(divName2).appendChild(info);


        var cellVal = getCells.item(j).innerHTML;
        var getDiv = document.getElementById(projectInfo);
        getDiv.innerHTML = cellVal;

    }

}

第一个 for 循环为整行创建 div 并将其附加到页面中已存在的 div，然后我在第二个 for 循环中得到错误。

Answer 1

您使用了很多不必要的变量和定义。例如 divName2 应该与 divName 相同，因此是多余的。希望这个例子能帮到你。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function loadTable(){
                var tT = document.getElementById('projectsTable'); //Source table
                var tJ = document.getElementById('javascript'); //New clone container
                if (tT && tJ){
                    for(var i=0, j=tT.rows.length;i<j;i++){
                        var tP = document.createElement('div'); //Our project div(:=tr)
                        tP.id = 'projects' + i.toString();

                        for(k=0, l=tT.rows.item(i).cells.length;k<l;k++){
                            var tI = document.createElement('div'); //Our info div(:=td)
                            tI.id = 'info' + k.toString();
                            tI.innerHTML = (i+1)*k;
                            tP.appendChild(tI); //We still have the correct project from above, so we just use it.
                        };

                        tJ.appendChild(tP); //Adding project to the dom
                    };
                };
            };
        </script>
    </head>

    <body onload = 'loadTable();'>
        <table id = 'projectsTable'>
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>4</td><td>5</td><td>6</td></tr>
        </table>

        <div id = 'javascript'></div>
    </body>
</html>

无法在 For 循环中读取 null 的属性 of 'appendchild'

Cannot read property of 'appendchild' of null in a For-Loop

html

javascript

jquery

for-loop

appendchild

无法在 For 循环中读取 null 的 属性 of 'appendchild'

Cannot read property of 'appendchild' of null in a For-Loop

html

javascript

jquery

for-loop

appendchild

无法在 For 循环中读取 null 的属性 of 'appendchild'