Home/ Questions/Q 8382093
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T16:51:16+00:00

I am trying to create a simple javascript html table so I can put

  • 0

I am trying to create a simple javascript html table so I can put dynamic data in to it but it wont show when I check my browser. Could someone please tell me what I am doing wrong and how I can get it to show on the page the way I have it? Thank you!

    <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to put the script in to window.onload. When you execute the script the div does not show yet, so it cannot get id for you

    Or put the script below the 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>
    • 0