I am looking for a script that will allow a table to be dynamicly created. I would like to be able to have a user input the number of rows, columns, cell spacing, cell padding, borders on/off, and border width. Then, they would hit submit and the table would be created for them on the page. I can understand how this can be done using a form, document.write and looping I just don't know how to implement it. If anyone knows where I can find a script to create a table with all or even some of these elements I would appreciate it.
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Dynamicly Create A Table 1
- Thread starter mjstark
- Start date
-
1
- #2
this is from
Might be what your looking for
<!-- TWO STEPS TO INSTALL TABLE MAKER:
1. Paste the FRAMESET code into your HTML document
2. Add the next code into the BODY of your table-maker-left.html -->
<!-- STEP ONE: Paste the FRAMESET code into your HTML document -->
<HTML>
<HEAD>
<TITLE>Table Maker</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Andy Augustine -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->
<!-- Begin
var myTable = new tableObj('','Default',1,1,1,1,2,'','');
function propObj(string,outstring) {
this.value = string;
this.out = outstring + string;
}
function setValues(form) {
this.alignment.value= form.alignment.value;
this.border.value= form.border.value;
this.cellspacing.value = form.cellspacing.value;
this.cellpadding.value = form.cellpadding.value;
this.rows.value = form.numrows.options[form.numrows.selectedIndex].text;
this.cols.value = form.numcols.options[form.numcols.selectedIndex].text;
this.calign.value = form.calign.value;
this.cvalign.value = form.cvalign.value;
}
function updateProps() {
this.alignment.out= " ALIGN=" + this.alignment.value;
this.border.out= " BORDER=" + this.border.value;
this.cellspacing.out = " CELLSPACING=" + this.cellspacing.value;
this.cellpadding.out = " CELLPADDING=" + this.cellpadding.value;
this.rows.out = " ROWS=" + this.rows.value;
this.cols.out = " COLS=" + this.cols.value;
this.calign.out = " ALIGN=" + this.calign.value;
this.cvalign.out = " VALIGN=" + this.cvalign.value;
}
function tableObj(align,caption,border,cellpadding,cellspacing,rows,cols,calign,cvalign) {
this.alignment = new propObj(align," ALIGN="
;
this.border = new propObj(border," BORDER="
this.cellspacing = new propObj(cellspacing," CELLSPACING="
this.cellpadding = new propObj(cellpadding," CELLPADDING="
this.rows = new propObj(rows," ROWS="
this.cols = new propObj(cols," COLS="
this.calign = new propObj(calign," ALIGN="
this.cvalign = new propObj(cvalign," VALIGN="
this.setValues = setValues;
this.updateProps = updateProps;
}
function dumpProps(obj,obj_name) {
var result = "", i ="";
for (i in obj)
result += obj_name +"."+ i +" = "+ obj.value +"\n";
return result;
}
function dumpTags(obj,obj_name) {
var result = "", i ="";
for (i in obj)
result += obj_name +"."+ i +".out = "+ obj.out +"\n";
return result;
}
function drawTable(table) {
var tabdoc = this.tableframe.document;
table.updateProps();
tabdoc.open();
tabdoc.write('<HTML><BODY>---Your Table---<br><br><br>')
tabdoc.write('<TABLE ')
tabdoc.write(table.alignment.out)
tabdoc.write(table.cellspacing.out)
tabdoc.write(table.cellpadding.out)
tabdoc.write(table.border.out)
tabdoc.write(' >')
for (var i=1; i <= table.rows.value; i++) {
tabdoc.write('<TR' +table.cvalign.out+ '>')
for (var j = 1; j <= table.cols.value; j++) {
tabdoc.write('<TD ' +table.calign.out+ '>' +(j*i)+ '</TD>')
}
tabdoc.write('</TR>')
}
tabdoc.write('</TABLE></HTML></BODY>')
tabdoc.close()
}
function showSource() {
var opts = 'width=350,height=350,scrollbars=yes,directories=no,status=yes,location=no,toolbar=no';
var ltag = '<'
var gtag = '>'
var sourcewin = window.open('','source',opts)
sourcewin= window.open('','source')
sourcewin.status="Cut and paste this info into your web page"
sourcewin.document.write('<HTML><BODY BGCOLOR="#FFFFFF" <PRE><XMP>')
sourcewin.document.writeln(ltag + 'TABLE ')
if (myTable.alignment.out != '')
sourcewin.document.writeln(myTable.alignment.out)
sourcewin.document.writeln(myTable.border.out)
sourcewin.document.writeln(myTable.cellspacing.out)
sourcewin.document.writeln(myTable.cellpadding.out + gtag)
for (var i=1; i <= myTable.rows.value; i++) {
sourcewin.document.writeln(ltag+ 'TR' +myTable.cvalign.out+ ' ' +myTable.calign.out+ gtag)
for (var j = 1; j <= myTable.cols.value; j++) {
sourcewin.document.writeln(' ' +ltag+ 'TD' +gtag +(j*i)+ ltag+ '/TD' +gtag)
}
sourcewin.document.writeln(ltag+ '/TR' +gtag)
}
sourcewin.document.writeln(ltag+ '/TABLE' +gtag)
sourcewin.document.write('</XMP></PRE><CENTER>')
sourcewin.document.write('<FORM NAME=menu><INPUT TYPE="button" ');
sourcewin.document.write('VALUE="Close" onClick="self.document.clear();self.close()">')
sourcewin.document.write('<P><P><P><P><P><P></FORM>')
sourcewin.document.write('</CENTER></BODY></HTML>')
sourcewin.document.close()
}
// End -->
</SCRIPT>
</HEAD>
<frameset cols="50%,50%" onLoad="parent.myTable.setValues(this.info.tform);parent.drawTable(parent.myTable)">
<frame src="table-maker-left.html" name="info">
<frame src="javascript:void(0)" name="tableframe" marginwidth="4">
</frameset>
</html>
<!-- STEP TWO: Add to the BODY of your table-maker-left.html -->
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function init() {
with (document) {
tform.alignment.value="left"
tform.align.value="left"
tform.calign.value="left"
tform.cvalign.value="center"
}
}
function clearit(form) {
form.alignment.value = "left"
form.align.value="left"
form.border.value = 1
form.cellspacing.value = 1
form.cellpadding.value = 1
form.numrows.selectedIndex = 0
form.numcols.selectedIndex = 1
form.calign.value = ''
form.cvalign.value = ''
}
function isNum(entry) {
var str = entry.value;
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i + 1)
if ((ch < "0" || "9" < ch) && ch != '.') {
alert("You must enter a number."
entry.value=0
entry.focus()
entry.select()
}
}
}
// End -->
</SCRIPT>
</head>
<body onLoad="init()" bgcolor="#ffffff">
<center><table border=1><form name="tform">
<tr align=center>
<td><input type="reset" name="clear" value="Reset to Defaults" onClick="clearit(this.form)">
<td>Alignment:<br>
<input type="radio" name="align" value="left" onClick="document.tform.alignment.value=this.value" checked>Left
<input type="radio" name="align" value="center" onClick="document.tform.alignment.value=this.value">Center
<input type="radio" name="align" value="right" onClick="document.tform.alignment.value=this.value">Right
<input type="hidden" name="alignment" value="left">
<tr align=center>
<td colspan=2>Border Width (in Pixels):
<input name="border" value="1" size="3" onChange="isNum(this)" value=1>
<br>
<input type="radio" name="br" value="0" onClick="tform.border.value=0">0
<input type="radio" name="br" value="1" onClick="tform.border.value=1" checked>1
<input type="radio" name="br" value="2" onClick="tform.border.value=2">2
<input type="radio" name="br" value="5" onClick="tform.border.value=5">5
<input type="radio" name="br" value="10" onClick="tform.border.value=10">10
<input type="radio" name="br" value="15" onClick="tform.border.value=15">15
<tr>
<td>Cellpadding:<input name="cellpadding" size=3 value=1 onChange="isNum(this)">
<td>Cellspacing:<input name="cellspacing" size=3 value=1 onChange="isNum(this)">
<tr align=center>
<td>Rows:<br><select name="numrows">
<option selected>1 <option>2 <option>3 <option>4 <option>5
</select>
<td>Cols:<br><select name="numcols">
<option>1 <option selected>2 <option>3 <option>4 <option>5
</select>
<tr>
<td>HORIZONTAL ALIGNMENT (cells):<br>
<input type="radio" name="calign" value="left" onClick="document.tform.calign.value=this.value" checked>Left
<input type="radio" name="calign" value="center"onClick="document.tform.calign.value=this.value">Center
<input type="radio" name="calign" value="right" onClick="document.tform.calign.value=this.value">Right
<td>VERTICAL ALIGNMENT (cells):<BR>
<input type="radio" name="cvalign" value="top" onClick="document.tform.cvalign.value=this.value">Top
<input type="radio" name="cvalign" value="center" onClick="document.tform.cvalign.value=this.value" checked>Center
<input type="radio" name="cvalign" value="bottom" onClick="document.tform.cvalign.value=this.value">Bottom
<tr align=center>
<td colspan=2><input type="button" name="drawtable" value="Draw this table!" onClick="parent.myTable.setValues(this.form);parent.drawTable(parent.myTable)">
</tr>
<tr>
<td colspan=2>The following features correspond to bottom frame:</TD>
</tr>
<tr align=center>
<td colspan=2><input type="button" value="See HTML code for table!" onClick="parent.showSource()">
</tr>
<tr align=center>
<td colspan=2><input type="button" value="View table values" onClick="alert(parent.dumpProps(parent.myTable,'myTable'))">
</tr>
</table>
</form></table></center>
</body>
</html>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href=" JavaScript Source</a></font>
</center><p>
<!-- Script Size: 8.35 KB --> I help at your own risk, if I brake it sorry! But if I fixed it, let me know with a
![[thumbsup2]](/data/assets/smilies/thumbsup2.gif "[thumbsup2] [thumbsup2]")
admin@onpntwebdesigns.com
Might be what your looking for
<!-- TWO STEPS TO INSTALL TABLE MAKER:
1. Paste the FRAMESET code into your HTML document
2. Add the next code into the BODY of your table-maker-left.html -->
<!-- STEP ONE: Paste the FRAMESET code into your HTML document -->
<HTML>
<HEAD>
<TITLE>Table Maker</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Andy Augustine -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->
<!-- Begin
var myTable = new tableObj('','Default',1,1,1,1,2,'','');
function propObj(string,outstring) {
this.value = string;
this.out = outstring + string;
}
function setValues(form) {
this.alignment.value= form.alignment.value;
this.border.value= form.border.value;
this.cellspacing.value = form.cellspacing.value;
this.cellpadding.value = form.cellpadding.value;
this.rows.value = form.numrows.options[form.numrows.selectedIndex].text;
this.cols.value = form.numcols.options[form.numcols.selectedIndex].text;
this.calign.value = form.calign.value;
this.cvalign.value = form.cvalign.value;
}
function updateProps() {
this.alignment.out= " ALIGN=" + this.alignment.value;
this.border.out= " BORDER=" + this.border.value;
this.cellspacing.out = " CELLSPACING=" + this.cellspacing.value;
this.cellpadding.out = " CELLPADDING=" + this.cellpadding.value;
this.rows.out = " ROWS=" + this.rows.value;
this.cols.out = " COLS=" + this.cols.value;
this.calign.out = " ALIGN=" + this.calign.value;
this.cvalign.out = " VALIGN=" + this.cvalign.value;
}
function tableObj(align,caption,border,cellpadding,cellspacing,rows,cols,calign,cvalign) {
this.alignment = new propObj(align," ALIGN="
;this.border = new propObj(border," BORDER="
;this.cellspacing = new propObj(cellspacing," CELLSPACING="
;this.cellpadding = new propObj(cellpadding," CELLPADDING="
;this.rows = new propObj(rows," ROWS="
;this.cols = new propObj(cols," COLS="
;this.calign = new propObj(calign," ALIGN="
;this.cvalign = new propObj(cvalign," VALIGN="
;this.setValues = setValues;
this.updateProps = updateProps;
}
function dumpProps(obj,obj_name) {
var result = "", i ="";
for (i in obj)
result += obj_name +"."+ i +" = "+ obj.value +"\n";
return result;
}
function dumpTags(obj,obj_name) {
var result = "", i ="";
for (i in obj)
result += obj_name +"."+ i +".out = "+ obj.out +"\n";
return result;
}
function drawTable(table) {
var tabdoc = this.tableframe.document;
table.updateProps();
tabdoc.open();
tabdoc.write('<HTML><BODY>---Your Table---<br><br><br>')
tabdoc.write('<TABLE ')
tabdoc.write(table.alignment.out)
tabdoc.write(table.cellspacing.out)
tabdoc.write(table.cellpadding.out)
tabdoc.write(table.border.out)
tabdoc.write(' >')
for (var i=1; i <= table.rows.value; i++) {
tabdoc.write('<TR' +table.cvalign.out+ '>')
for (var j = 1; j <= table.cols.value; j++) {
tabdoc.write('<TD ' +table.calign.out+ '>' +(j*i)+ '</TD>')
}
tabdoc.write('</TR>')
}
tabdoc.write('</TABLE></HTML></BODY>')
tabdoc.close()
}
function showSource() {
var opts = 'width=350,height=350,scrollbars=yes,directories=no,status=yes,location=no,toolbar=no';
var ltag = '<'
var gtag = '>'
var sourcewin = window.open('','source',opts)
sourcewin= window.open('','source')
sourcewin.status="Cut and paste this info into your web page"
sourcewin.document.write('<HTML><BODY BGCOLOR="#FFFFFF" <PRE><XMP>')
sourcewin.document.writeln(ltag + 'TABLE ')
if (myTable.alignment.out != '')
sourcewin.document.writeln(myTable.alignment.out)
sourcewin.document.writeln(myTable.border.out)
sourcewin.document.writeln(myTable.cellspacing.out)
sourcewin.document.writeln(myTable.cellpadding.out + gtag)
for (var i=1; i <= myTable.rows.value; i++) {
sourcewin.document.writeln(ltag+ 'TR' +myTable.cvalign.out+ ' ' +myTable.calign.out+ gtag)
for (var j = 1; j <= myTable.cols.value; j++) {
sourcewin.document.writeln(' ' +ltag+ 'TD' +gtag +(j*i)+ ltag+ '/TD' +gtag)
}
sourcewin.document.writeln(ltag+ '/TR' +gtag)
}
sourcewin.document.writeln(ltag+ '/TABLE' +gtag)
sourcewin.document.write('</XMP></PRE><CENTER>')
sourcewin.document.write('<FORM NAME=menu><INPUT TYPE="button" ');
sourcewin.document.write('VALUE="Close" onClick="self.document.clear();self.close()">')
sourcewin.document.write('<P><P><P><P><P><P></FORM>')
sourcewin.document.write('</CENTER></BODY></HTML>')
sourcewin.document.close()
}
// End -->
</SCRIPT>
</HEAD>
<frameset cols="50%,50%" onLoad="parent.myTable.setValues(this.info.tform);parent.drawTable(parent.myTable)">
<frame src="table-maker-left.html" name="info">
<frame src="javascript:void(0)" name="tableframe" marginwidth="4">
</frameset>
</html>
<!-- STEP TWO: Add to the BODY of your table-maker-left.html -->
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function init() {
with (document) {
tform.alignment.value="left"
tform.align.value="left"
tform.calign.value="left"
tform.cvalign.value="center"
}
}
function clearit(form) {
form.alignment.value = "left"
form.align.value="left"
form.border.value = 1
form.cellspacing.value = 1
form.cellpadding.value = 1
form.numrows.selectedIndex = 0
form.numcols.selectedIndex = 1
form.calign.value = ''
form.cvalign.value = ''
}
function isNum(entry) {
var str = entry.value;
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i + 1)
if ((ch < "0" || "9" < ch) && ch != '.') {
alert("You must enter a number."
entry.value=0
entry.focus()
entry.select()
}
}
}
// End -->
</SCRIPT>
</head>
<body onLoad="init()" bgcolor="#ffffff">
<center><table border=1><form name="tform">
<tr align=center>
<td><input type="reset" name="clear" value="Reset to Defaults" onClick="clearit(this.form)">
<td>Alignment:<br>
<input type="radio" name="align" value="left" onClick="document.tform.alignment.value=this.value" checked>Left
<input type="radio" name="align" value="center" onClick="document.tform.alignment.value=this.value">Center
<input type="radio" name="align" value="right" onClick="document.tform.alignment.value=this.value">Right
<input type="hidden" name="alignment" value="left">
<tr align=center>
<td colspan=2>Border Width (in Pixels):
<input name="border" value="1" size="3" onChange="isNum(this)" value=1>
<br>
<input type="radio" name="br" value="0" onClick="tform.border.value=0">0
<input type="radio" name="br" value="1" onClick="tform.border.value=1" checked>1
<input type="radio" name="br" value="2" onClick="tform.border.value=2">2
<input type="radio" name="br" value="5" onClick="tform.border.value=5">5
<input type="radio" name="br" value="10" onClick="tform.border.value=10">10
<input type="radio" name="br" value="15" onClick="tform.border.value=15">15
<tr>
<td>Cellpadding:<input name="cellpadding" size=3 value=1 onChange="isNum(this)">
<td>Cellspacing:<input name="cellspacing" size=3 value=1 onChange="isNum(this)">
<tr align=center>
<td>Rows:<br><select name="numrows">
<option selected>1 <option>2 <option>3 <option>4 <option>5
</select>
<td>Cols:<br><select name="numcols">
<option>1 <option selected>2 <option>3 <option>4 <option>5
</select>
<tr>
<td>HORIZONTAL ALIGNMENT (cells):<br>
<input type="radio" name="calign" value="left" onClick="document.tform.calign.value=this.value" checked>Left
<input type="radio" name="calign" value="center"onClick="document.tform.calign.value=this.value">Center
<input type="radio" name="calign" value="right" onClick="document.tform.calign.value=this.value">Right
<td>VERTICAL ALIGNMENT (cells):<BR>
<input type="radio" name="cvalign" value="top" onClick="document.tform.cvalign.value=this.value">Top
<input type="radio" name="cvalign" value="center" onClick="document.tform.cvalign.value=this.value" checked>Center
<input type="radio" name="cvalign" value="bottom" onClick="document.tform.cvalign.value=this.value">Bottom
<tr align=center>
<td colspan=2><input type="button" name="drawtable" value="Draw this table!" onClick="parent.myTable.setValues(this.form);parent.drawTable(parent.myTable)">
</tr>
<tr>
<td colspan=2>The following features correspond to bottom frame:</TD>
</tr>
<tr align=center>
<td colspan=2><input type="button" value="See HTML code for table!" onClick="parent.showSource()">
</tr>
<tr align=center>
<td colspan=2><input type="button" value="View table values" onClick="alert(parent.dumpProps(parent.myTable,'myTable'))">
</tr>
</table>
</form></table></center>
</body>
</html>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href=" JavaScript Source</a></font>
</center><p>
<!-- Script Size: 8.35 KB --> I help at your own risk, if I brake it sorry! But if I fixed it, let me know with a
admin@onpntwebdesigns.com
![[lol]](/data/assets/smilies/lol.gif "[lol] [lol]")
- Thread starter
- #5
- Status
Similar threads
- Locked
- Question
- Locked
- Question