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 を見つけようとします。

これを回避する簡単な方法は、スクリプトを末尾の body タグの前に配置することです。

<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 に答える