0

我正在尝试创建一个简单的 javascript html 表，以便可以将动态数据放入其中，但是当我检查浏览器时它不会显示。有人可以告诉我我做错了什么以及如何让它以我拥有的方式显示在页面上吗？谢谢！

    <head>
    <title>Test JS Table</title>
    <script Language="JavaScript">

        var nrCols=2;
        var nrRows=4;
        var root=document.getElementById('mydiv');
        var tab=document.createElement('table');

        tab.className="mytable";

        var tbo=document.createElement('tbody');
        var row, cell;

    </script>

    <style type="text/css">
    .mytable {
    border-collapse:collapse;
    width:200px;
    }

   .mytable td{
    border:1px solid #000000;
    }
    </style>
    </head>
    <body>

    <script language="javascript">
        tab.className="mytable";

        for(var i=0;i<nrRows;i++){
          row=document.createElement('tr');

         for(var j=0;j<nrCols;j++){
               cell=document.createElement('td');
               cell.appendChild(document.createTextNode("ROW DATA HERE..."))
               row.appendChild(cell);
         }

         tbo.appendChild(row);
        }

      tab.appendChild(tbo);
     root.appendChild(tab);

    </script>
    <div id="mydiv"></div>
    </body>
    </html>
4

2 回答 2

2

对于初学者来说，这是一个很常见的错误。从上到下读取 HTML 文件，分析 html 并在遇到时执行 javascript。您的 Javascript 尝试在找到具有相应 div 的 html 之前找到 id 为 mydiv 的 div。

解决此问题的一种简单方法是将脚本放在底部，在结束正文标记之前。

<head>
    <title>Test JS Table</title>


    <style type="text/css">
    .mytable {
    border-collapse:collapse;
    width:200px;
    }

   .mytable td{
    border:1px solid #000000;
    }
    </style>
    </head>
    <body>

    <div id="mydiv"></div>

     <script Language="JavaScript">

        var nrCols=2;
        var nrRows=4;
        var root=document.getElementById('mydiv');
        var tab=document.createElement('table');

        tab.className="mytable";

        var tbo=document.createElement('tbody');
        var row, cell;

        tab.className="mytable";

        for(var i=0;i<nrRows;i++){
          row=document.createElement('tr');

         for(var j=0;j<nrCols;j++){
               cell=document.createElement('td');
               cell.appendChild(document.createTextNode("ROW DATA HERE..."))
               row.appendChild(cell);
         }

         tbo.appendChild(row);
        }

      tab.appendChild(tbo);
     root.appendChild(tab);

    </script>
    </body>
    </html>

这是 jsFiddle 中的一个活生生的例子

于 2012-08-16T08:12:10.190 回答
1

您必须将脚本放入window.onload. 当您执行脚本时，div 尚未显示，因此它无法为您获取 id

或者把脚本放在div下面

<head>
<title>Test JS Table</title>


<style type="text/css">
.mytable {
border-collapse:collapse;
width:200px;
}

.mytable td{
border:1px solid #000000;
}
</style>
</head>
<body>


<div id="mydiv"></div>

<script Language="JavaScript">

    var nrCols=2;
    var nrRows=4;
    var root=document.getElementById('mydiv');
    var tab=document.createElement('table');

    tab.className="mytable";

    var tbo=document.createElement('tbody');
    var row, cell;

</script>

<script language="javascript">
    tab.className="mytable";

    for(var i=0;i<nrRows;i++){
      row=document.createElement('tr');

     for(var j=0;j<nrCols;j++){
           cell=document.createElement('td');
           cell.appendChild(document.createTextNode("ROW DATA HERE..."))
           row.appendChild(cell);
     }

     tbo.appendChild(row);
    }

  tab.appendChild(tbo);
 root.appendChild(tab);

</script>

</body>
</html>
于 2012-08-16T08:08:51.903 回答