Question

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

此表包含3列和3行。

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

我已经创建了许多For循环来尝试这个，我的问题是我创建的第二个for循环，它经历了一次，我收到错误＆＃34;无法读取属性＆＃39;的appendChild＆＃39; of null＆＃34;。我不确定为什么会这样做。任何帮助将不胜感激。

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，然后我在第二个循环中得到错误。

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>

无法阅读＆quot; appendchild＆＃39;的财产For循环中的null

1 个答案: