Home/ Questions/Q 9217659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:40:55+00:00

I’m trying to dynamically create a table based on user input, and it’s working

  • 0

I’m trying to dynamically create a table based on user input, and it’s working perfectly, however, it is supposed to make a table based on the super input the user gives, so if super is 2, then it loops to create 2 tables. However it is doing everything but that, because if it was, then the tables would be next to each other, not one below each other as I have set the CSS that way. Any ideas?

<script type="text/javascript">
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
var y = 1;
for( var i = 1; i <= num_super; i++){
    var theader = '<div style="margin:0 auto;"><table border="1" style="border:1px solid black; float:left;">\n';
        for(u = 1; u <= num_rows; u++){
          tbody += '<tr>';
            for( var j = 0; j < colStart; j++)
            {
            tbody += '<td style="width:80px; height:70px;">';
            tbody += '<sub style="float:right; position:relative; top:24px; z-index:11;  ">' + y + '</sub>';
            tbody += '</td>';
            y++;
            }
    tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
}
</script>

<body>
<form name="tablegen">
<label>Ports: <input type="text" name="ports" id="ports"/></label><br />
<label>Super Columns: <input type="text" name="super" id="super"/></label><br />
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Columns: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>

<div id="wrapper"></div>
</body>
</html>

How it should look

dynamic table

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It resets the table it created to the new table in current iteration in this line:

    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;

    You have to do something like this:

    document.getElementById('wrapper').innerHTML += theader + tbody + tfooter;

    In addition to your comment:

    var colStart = num_cols / num_super;

    Should mabe be:

    var colStart = num_cols * num_super;
    • 0