Home/ Questions/Q 9207977
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:30:37+00:00

I am trying to create a table based on user input (actually two or

  • 0

I am trying to create a table based on user input (actually two or three tables depending on the user input..) using Javascript, I am very much native to PHP and have already got this working in PHP, however i would like the user to be able to see the table before the query it. I found a script on here that partially did what I wanted and have attempted to edit it (I found it surprisingly similar to PHP) Basically it calculates the total amount of cells (ports) splits it by rows and columns, the “super” column is used if the user would like it to be split into multiple tables, which align next to each other, hence the div tag. Here’s my JS:

<html>
<head>
<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;
for( var i=0; i<num_super; i++){
    var theader = '<div><table border="1">\n';
        for(u=1; u<=num_row; u++){
          tbody += '<tr>';
            for( var j=0; j<colStart; j++)
            {
            tbody += '<td>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>'
            }
    tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>

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

Here is what the final output looks like after it has been processed by PHP (ports:24, col:6, rows:2, super:2):

table

Here is a js fiddle that I threw together:
http://jsfiddle.net/9SnLB/

Currently, when I click the button nothing happens, but, I suppose that is my first issue, but am I going about the setup correctly? Why wont the button run the function?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Two mistakes. One you didn’t close the function bracket, ie a missing } at the end. The second is you used $row instead of the variable you created num_rows. For some reason it doesn’t work in the fiddle, it does however work locally. The fiddle is saying the createTable function is undefined.

    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;
    for( var i=0; i<num_super; i++){
        var theader = '<div><table border="1">\n';
            for($u=1; $u<=num_rows; $u++){
              tbody += '<tr>';
                for( var j=0; j<colStart; j++)
                {
                tbody += '<td>';
                tbody += 'Cell ' + i + ',' + j;
                tbody += '</td>'
                }
        tbody += '</tr>\n';
    }
    var tfooter = '</table></div>';
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
}
    • 0