I made this simple website that adds and removes rows from a table. I have a two problems.The first one is whenever i add elements and them start deleting them my css style for my table is gone. Any idea how to fix it ? For example if i add 5rows and try to delete two of them then my style for all rows is gone. The second problem is how can i implement a function counter that will change the number of elements in the table and will keep track of them whenever someone removes or add new element. Here is my code:
var title = document.getElementById("title");
var author = document.getElementById("author");
var output = document.getElementById("output");
function addToTable() {
var radio = document.getElementsByName("content");
var radio_selected;
for (var a = 0; a < radio.length; a++) {
if (radio[a].checked) {
radio_selected =
radio[a].value;
}
}
output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" +
"<td>" + author.value + "</td>" +
"<td>" + radio_selected + "</td>" +
"<td>" + "<input type='button' onclick='post(this);' id='post' value='Post'>" +
"<input type='button' onclick='remove(this);' id='remove'value='Remove'>" + "</td>" + "</tr>"
}
function counter() {
var counter = document.getElementById("counterForElements");
counter.innerHTML += 1;
}
function remove(btn) {
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
row.parentNode.removeChild(row);
}
function post(btn) {
var row = btn.parentNode;
row.parentNode.style.backgroundColor = "Green";
btn.setAttribute("disabled", "true");
btn.parentNode.lastElementChild.setAttribute("disabled", "true");
}
label {
width: 100px;
display: inline-block;
}
table,
th,
td,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
table td {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div>
<div>
<label for="Title">Title</label>
<input type="text" id="title">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="author">
</div>
<div>
<label for="content" id="contentlabel">Content type</label>
<input type="radio" name="content" value="Free" class="content">Free
<input type="radio" name="content" value="Paid" class="content">Paid
</div>
</div>
<div>
<input type="button" value="Add" onclick="addToTable(); counter();">
</div>
<div>
<h1>Number of elements<span id="counterForElements">0</span></h1>
</div>
<div>
<table id="output">
<th style="width:40%;">Title</th>
<th style="width:40%;">Author</th>
<th style="width:10%;">Type</th>
<th style="width:10%;">Button</th>
</table>
</div>
<div>
<h1>Removed elements</h1>
<table id="removed">
</table>
</div>
</body>
</html>
I think I have found what cause the border issue in Firefox.
Your output is set to the <table>, but you used <th> without <thead> nor <th>.
I simply added those missing tags, then I set the output to a new <tbody> tag.
It seems to work fine now.
var title = document.getElementById("title");
var author = document.getElementById("author");
var output = document.getElementById("output");
function addToTable() {
var radio = document.getElementsByName("content");
var radio_selected;
for (var a = 0; a < radio.length; a++) {
if (radio[a].checked) {
radio_selected =
radio[a].value;
}
}
output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" +
"<td>" + author.value + "</td>" +
"<td>" + radio_selected + "</td>" +
"<td>" + "<input type='button' onclick='post(this);' id='post' value='Post'>" +
"<input type='button' onclick='remove(this);' id='remove'value='Remove'>" + "</td>" + "</tr>"
}
function counter() {
var counter = document.getElementById("counterForElements");
counter.innerHTML += 1;
}
function remove(btn) {
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
row.parentNode.removeChild(row);
}
function post(btn) {
var row = btn.parentNode;
row.parentNode.style.backgroundColor = "Green";
btn.setAttribute("disabled", "true");
btn.parentNode.lastElementChild.setAttribute("disabled", "true");
}
label {
width: 100px;
display: inline-block;
}
table,
th,
td,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
table td {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div>
<div>
<label for="Title">Title</label>
<input type="text" id="title">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="author">
</div>
<div>
<label for="content" id="contentlabel">Content type</label>
<input type="radio" name="content" value="Free" class="content">Free
<input type="radio" name="content" value="Paid" class="content">Paid
</div>
</div>
<div>
<input type="button" value="Add" onclick="addToTable(); counter();">
</div>
<div>
<h1>Number of elements<span id="counterForElements">0</span></h1>
</div>
<div>
<table>
<thead>
<th style="width:40%;">Title</th>
<th style="width:40%;">Author</th>
<th style="width:10%;">Type</th>
<th style="width:10%;">Button</th>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
<div>
<h1>Removed elements</h1>
<table id="removed">
</table>
</div>
</body>
</html>
Your counter() function is not properly treating the innerHTML property as an integer. Here is a fix:
function counter() {
var counter = document.getElementById("counterForElements");
counter.innerHTML = parseInt(counter.innerHTML) + 1;
}
Another way would be with a global variable:
let counter = 0;
function counter() {
var counter = document.getElementById("counterForElements");
counter.innerHTML = ++counter;
}
If you want to keep track of removals, you would need to do so in remove():
function remove(btn) {
// ... existing code goes here
counter.innerHTML = parseInt(counter.innerHTML) + 1;
// or:
counter.innerHTML = --counter;
}
Another way would be to count the number of <tr> elements in the table and store that in counter.innerHTML every time you add or remove a row.
Related
I have a form within a table with Title and description columns and the rows can be added dynamically by a button. I need to access and save the input values in text boxes created by javascript function when saving the form by save button. the input values are later saved on local storage. The saved values are used to repopulate the form in case of unsuccessful validation.
function add_text_input() {
var table = document.getElementById('mytable');
var x = table.rows.length;
table.insertRow(-1).innerHTML = '<tr>' +
'<td> <input type="text" id="title' + x + '" /></td>' +
'<td> <input type="text" id="description' + x + '" /></td></tr>';
}
function save_data() {
var table = document.getElementById('mytable');
var tableRows = table.rows.length;
var data = [];
for (var i = 1; i <= tableRows; i++) {
for (var j = 0; j < 2; j++) {
var title = document.getElementById('title' + i).value;
var desc = document.getElementById('description' + i).value;
var temp = {
title: title,
description: desc
};
data.push(temp);
}
}
window.localStorage.setItem('Table1', JSON.stringify(data));
}
<form>
<table id="mytable">
<tr>
<td> Title </td>
<td> Description </td>
</tr>
</table>
<input type="button" onclick="add_text_input()" value="add row">
<input type="button" onclick="save_data()" value="save">
</form>
did you mean something like this?
$(document).ready(()=>{
$('#container').append('<input id="addedTxt" type="text" />');
$('#addedTxt').val('Test');
$('#saveBtn').on('click', ()=>{
alert($('#addedTxt').val());
});
});
<div id="container">
</div>
<input id="saveBtn" type="button" value="save" />
(using jquery)
https://jsfiddle.net/u6vnxwzc/1/#&togetherjs=rQ2b5IsJQ1
or where is the problem?
In your code why you use the second For loop? I think it is not necessary.
find the working code snippet
https://s.codepen.io/mastersmind/debug/VNyKrY/DqADdKoRXEjA
function add_text_input() {
var table = document.getElementById('mytable');
var x = table.rows.length;
table.insertRow(-1).innerHTML = '<tr>' +
'<td> <input type="text" id="title'+x+'" /></td>'+
'<td> <input type="text" id="description'+x+'" /></td></tr>';
}
function save_data(){
var table = document.getElementById('mytable');
var tableRows = table.rows.length;
var data = [];
for (var i = 1; i <= tableRows-1; i++) {
var title = document.getElementById('title'+ i).value;
var desc = document.getElementById('description'+ i).value;
var temp = {title: title, description: desc};
data.push(temp);
}
window.localStorage.setItem('Table1', JSON.stringify(data));
}
loadData = function(){
let data = JSON.parse(window.localStorage.getItem('Table1'));
for(i=0; i<data.length;i++){
add_text_input();
document.getElementById('title'+ (i+1)).value = data[i].title;
document.getElementById('description'+ (i+1)).value = data[i].description;
}
}
loadData();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<table id="mytable">
<tr>
<td> Title </td>
<td> Description </td>
</tr>
</table>
<input type="button" onclick="add_text_input()" value="add row">
<input type="button" onclick="save_data()" value="save">
</form>
</body>
</html>
the problem here is i don't need input field required when i remove required the table still empty and another problem when i enter (not valid character)
also the table data will be deleted
i need the input field not required and when click add it adds a new row
var myInput = document.getElementById("myInput")
myTable = document.getElementById("myTable")
i = 1
num = 1
tabledata = myTable.innerHTML;
function arr() {
if(myInput.value!=""){
if(/^[a-z]+$/i.test(myInput.value)){
if (num % 2 == 0) {
myTable.innerHTML = myTable.innerHTML + '<tr style="background:#ff8000"><td>' + i + '</td><td>' + myInput.value + "</td></tr>";
myInput.value = "";
i++;
} else {
myTable.innerHTML = myTable.innerHTML + '<tr style="background:#ffb366"><td>' + i + '</td><td>' + myInput.value + "</td></tr>";
myInput.value = "";
i++;
}
num++;
}
else {
alert("Please Enter A Valid Charceter");
}
}else{
alert("This Field Is Reqiured Please Enter Your Name")
}};
function res() {
myTable.innerHTML = "<tr> <th>Id</th> <th>Name</th> </tr>";
i = 1;
num = 1;
}
<h1>Enter Your Name</h1>
<form>
<input type="text" id="myInput" required/>
<button onclick="arr()">Add</button>
</form>
<table id="myTable">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</table>
<button onclick ="res()">Reset</button>
I didn't fully understand what you need, but I see here a little bit flaw:
When you click the "Add" button, the form is submitting, so you need to break this.
Try it:
<style>
#myTable tr {
background: #FF8000
}
#myTable tr:nth-child(odd){
background: #FFB366
}
</style>
<h1>Enter Your Name</h1>
<form id="myForm">
<input type="text" id="myInput" required />
<input type="submit" />
</form>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody id="myTable"></tbody>
</table>
<button id="myButton">Reset</button>
<script>
(function(){
"use strict";
var
form = document.getElementById("myForm"),
input = document.getElementById("myInput"),
table = document.getElementById("myTable"),
reset = document.getElementById("myButton");
form.addEventListener("submit", add, true);
function add(event){
event.preventDefault();
if( /^[a-z]+$/i.test(myInput.value) )
table.innerHTML += '<tr><td>' + (table.children.length + 1) + '</td><td>' + input.value + '</td></tr>';
return input.value = '';
}
function reset(){
table.innerHTML = '';
}
})()
</script>
Basically I am making a table which insert rows with click function.
When row is inserted user will select a value form dropdown menu. And according to that value new cells will be inserted in that perticular row.
I have added the whole functionality. But Problem I am getting here Every Time I select From Drop Down Menu It always alert 0. But not actual value.
Can any one tell what I am doing wrong here.
Another Error is. on first attempt of row selection rownum holds undefined value.
This is the whole code of document.
var counter = 2;
var rownum;
var selectedvalue;
function myFunction() {
if (counter > 5) {
alert("Only 5 Rooms selection is allow ! ");
return false;
} else {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell3 = row.insertCell(0);
var cell4 = row.insertCell(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<tr><td><label>Room # " + counter + ": </label></td>";
cell2.innerHTML = "<td><select ><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option></select></td> ";
cell3.innerHTML = "<td><select id='child1' onchange='ofChild()' ><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>";
counter++;
}
}
function ofChild() {
var e = document.getElementById("child1");
selectedvalue = e.options[e.selectedIndex].value;
alert(selectedvalue);
$('#myTable').find('tr').click(function() {
rownum = $(this).index()
});
var firstRow = document.getElementById("myTable").rows[rownum];
alert('You clicked row ' + (rownum));
// in forloop selectedvalue will be in condition, 3 is just to check
for (i = 0; i < 3; i++) {
var x = firstRow.insertCell(-1);
x.innerHTML = "<td><select><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td> </tr>";
}
}
function myDeleteFunction() {
if (counter < 2) {
return false;
} else {
document.getElementById("myTable").deleteRow(-1);
counter--;
}
}
div {
padding: 8px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id='TextBoxesGroup'>
<div align="center">
<table id="myTable" style="width:50%" class="table">
<tr class="success">
<td>
<label>Room</label>
</td>
<td>Adults (18+)</td>
<td>Child(0-17)</td>
<td>Child Age</td>
</tr>
<!--tr >
<td><label>Room # 1: </label></td>
<td><select ><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option></select></td>
<td><select id="child" onchange="ofChild()"><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>
<td><select class="age"><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>
</tr-->
</table>
</br>
<input type='button' value='Add Room' onclick="myFunction()" id='addRoom' class="btn btn-success">
<input type='button' value='Remove Room' onclick="myDeleteFunction()" id='removeButton' class="btn btn-danger">
<br>
<br>
<input type='button' value='Search' class="btn btn-primary">
</div>
</body>
</html>
Here is the picture of the output so far
add event listeners in myFunction
function myFunction(elem) {
...
$('#myTable').find('tr').off().on('click', function() {
rownum = $(this).index()
});
...
}
demo http://codepen.io/vorant/pen/wMNyNN?editors=1010
My question will ultimately be related to this site:
http://dbtest.net16.net/ethanol-01.html
EDIT: View unencrypted page source code here >>> http://dbtest.net16.net/ethanol-22.html
This is an HTML form with results calculated using JavaScript. My goal is to display a table of 2-6 columns and variable number of rows depending on user input (form would be modified). My problem is that I am not fully understanding how to get the table created in JavaScript after the user clicks the Calculate button. I have found some potential good answers but apparently don't fully understand it all. Running the following code is somewhat like what I want my output to display.
<html>
<!-- http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm -->
<head>
<title>Table of Numbers</title>
</head>
<body>
<h1>Table of Numbers</h1>
<table border="0">
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
myArray[0] = 1;
myArray[1] = 2.218;
myArray[2] = 33;
myArray[3] = 114.94;
myArray[4] = 5;
myArray[5] = 33;
myArray[6] = 114.980;
myArray[7] = 5;
document.write("<tr><td style='width: 100px; color: red;'>Col Head 1</td>");
document.write("<td style='width: 100px; color: red; text-align: right;'>Col Head 2</td>");
document.write("<td style='width: 100px; color: red; text-align: right;'>Col Head 3</td></tr>");
document.write("<tr><td style='width: 100px;'>---------------</td>");
document.write("<td style='width: 100px; text-align: right;'>---------------</td>");
document.write("<td style='width: 100px; text-align: right;'>---------------</td></tr>");
for (var i = 0; i < 8; i++) {
document.write("<tr><td style='width: 100px;'>Number " + i + " is:</td>");
myArray[i] = myArray[i].toFixed(3);
document.write("<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td>");
document.write("<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td></tr>");
}
//-->
</script>
</table>
</body>
</html>
If I can get the test table to be created and populated with my test data using my actual javascript file, then I should then be able to figure the rest myself (I think).
Following are a couple of the best answers I could find so far:
http://jsfiddle.net/drewnoakes/YAXDZ/
The above link originated in stackoverflow but I can't seem to find the original post at this time.
http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm
Any help is appreciated. Simpler is better due to my limited experience.
The problem is that if you try to write a <table> or a <tr> or <td> tag using JS every time you insert a new tag the browser will try to close it as it will think that there is an error on the code.
Instead of writing your table line by line, concatenate your table into a variable and insert it once created:
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
myArray[0] = 1;
myArray[1] = 2.218;
myArray[2] = 33;
myArray[3] = 114.94;
myArray[4] = 5;
myArray[5] = 33;
myArray[6] = 114.980;
myArray[7] = 5;
var myTable= "<table><tr><td style='width: 100px; color: red;'>Col Head 1</td>";
myTable+= "<td style='width: 100px; color: red; text-align: right;'>Col Head 2</td>";
myTable+="<td style='width: 100px; color: red; text-align: right;'>Col Head 3</td></tr>";
myTable+="<tr><td style='width: 100px; '>---------------</td>";
myTable+="<td style='width: 100px; text-align: right;'>---------------</td>";
myTable+="<td style='width: 100px; text-align: right;'>---------------</td></tr>";
for (var i=0; i<8; i++) {
myTable+="<tr><td style='width: 100px;'>Number " + i + " is:</td>";
myArray[i] = myArray[i].toFixed(3);
myTable+="<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td>";
myTable+="<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td></tr>";
}
myTable+="</table>";
document.write( myTable);
//-->
</script>
If your code is in an external JS file, in HTML create an element with an ID where you want your table to appear:
<div id="tablePrint"> </div>
And in JS instead of document.write(myTable) use the following code:
document.getElementById('tablePrint').innerHTML = myTable;
In the html file there are three input boxes with userid,username,department respectively.
These inputboxes are used to get the input from the user.
The user can add any number of inputs to the page.
When clicking the button the script will enable the debugger mode.
In javascript, to enable the debugger mode, we have to add the following tag in the javascript.
/************************************************************************\
Tools->Internet Options-->Advanced-->uncheck
Disable script debugging(Internet Explorer)
Disable script debugging(Other)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dynamic Table</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function CmdAdd_onclick() {
var newTable,startTag,endTag;
//Creating a new table
startTag="<TABLE id='mainTable'><TBODY><TR><TD style=\"WIDTH: 120px\">User ID</TD>
<TD style=\"WIDTH: 120px\">User Name</TD><TD style=\"WIDTH: 120px\">Department</TD></TR>"
endTag="</TBODY></TABLE>"
newTable=startTag;
var trContents;
//Get the row contents
trContents=document.body.getElementsByTagName('TR');
if(trContents.length>1)
{
for(i=1;i<trContents.length;i++)
{
if(trContents(i).innerHTML)
{
// Add previous rows
newTable+="<TR>";
newTable+=trContents(i).innerHTML;
newTable+="</TR>";
}
}
}
//Add the Latest row
newTable+="<TR><TD style=\"WIDTH: 120px\" >" +
document.getElementById('userid').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" +
document.getElementById('username').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" +
document.getElementById('department').value +"</TD><TR>";
newTable+=endTag;
//Update the Previous Table With New Table.
document.getElementById('tableDiv').innerHTML=newTable;
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<label>UserID</label>
<input id="userid" type="text" /><br />
<label>UserName</label>
<input id="username" type="text" /><br />
<label>Department</label>
<input id="department" type="text" />
<center>
<input id="CmdAdd" type="button" value="Add" onclick="return CmdAdd_onclick()" />
</center>
</div>
<div id="tableDiv" style="text-align:center" >
<table id="mainTable">
<tr style="width:120px " >
<td >User ID</td>
<td>User Name</td>
<td>Department</td>
</tr>
</table>
</div>
</form>
</body>
</html>
This beautiful code here creates a table with each td having array values. Not my code, but it helped me!
var rows = 6, cols = 7;
for(var i = 0; i < rows; i++) {
$('table').append('<tr></tr>');
for(var j = 0; j < cols; j++) {
$('table').find('tr').eq(i).append('<td></td>');
$('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j);
}
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
The script i made loops and creates a table(s) based on user input, if super=2 then there should be 2 tables outputed with different numbers in the tables its working pretty well, except that it is printing the first table as it should, then when it does the second one, it reprints the fist one also.. any ideas?
code:
<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;
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 = 1; 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>
</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>
what i should look like:
what it is looking like:
Like the comment says - you clear tBody
var tbody = '';
before the loop , but that only happens once . Since it is delclared outside the loop , and never reset to '' , the contents of the first table are still in there for the second loop , try
for( var i = 1; i <= num_super; i++){
var tbody = '';
//...
Here you are
<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';
tbody = '';
for(u = 1; u <= num_rows; u++){
tbody += '<tr>';
for( var j = 1; 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>
</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>
added var tbody = '';