PDA

View Full Version : Table Maker

Basscyst
08-18-2004, 01:08 AM
Just thought I'd post this, nothing special, but maybe someone will find use for it. A little table maker. . . .


<html>
<head>
<style type="text/css">
table
{
border:solid 1px;
text-align:center;
}
th
{
background-color:#333399;
color:white;
}
td
{
border:solid 1px;
}
#tbl2
{
display:none;
}
span
{
text-align:center;
}
</style>
<script type="text/javascript">

function makeTable()
{
var times=0;
var tbl=document.createElement('table');
var tbody=document.createElement('tbody');
for(i=0;i<row;i++)
{
var tr=document.createElement('tr');
for(j=0;j<col;j++)
{
var td=document.createElement('td');
tr.appendChild(td);
var str=document.forms[1].elements[times].value;
td.appendChild(document.createTextNode(str))
times++;
}
tbody.appendChild(tr);
tbl.appendChild(tbody);
}
document.getElementById('tbl2').appendChild(tbl);
document.getElementById('tbl1').innerHTML='<form>'+
'<textarea id="txt" cols="35" rows="25"></textarea>'+
'</form>';
document.getElementById('txt').value=document.getElementById('tbl2').innerHTML
addBreaks('<tr>');
addBreaks('</tr>');
addBreaks('<table>');
addBreaks('</table>');

function addBreaks(elm)
{
var str=document.getElementById('txt').value;
document.getElementById('txt').value="";
var cut=str.split(elm);
var str2="";
for(i=0;i<cut.length;i++)
{
if(i!=cut.length-1)
{
str2+=cut[i]+'\n'+elm+'\n';
}
else
{
str2+=cut[i];
}
}
document.getElementById('txt').value=str2;
}
}

function showFields()
{
row=document.getElementById('row').value;
col=document.getElementById('col').value;
var frm=document.createElement('form')
var tbl=document.createElement('table');
var tbody=document.createElement('tbody');
for(i=0;i<row;i++)
{
var tr=document.createElement('tr');
for(j=0;j<col;j++)
{
var td=document.createElement('td');
tr.appendChild(td);
var fields='<input type="text" id="r'+i+'c'+j+'">';
td.appendChild(document.createElement('input'))
}
tbody.appendChild(tr);
tbl.appendChild(tbody);
frm.appendChild(tbl)

}
document.getElementById('tbl1').innerHTML='<span id="info">Each field represents a table cell.<br>Fill them in as you would like the content displayed.</span>';
document.getElementById('tbl1').appendChild(frm);
document.getElementById('tbl1').innerHTML+='<input type="button" onclick="makeTable()" value="Show HTML">';
}
</script>
</head>
<body>
<div id="cont">
<form>
<table>
<thead>
<th>Columns</th>
<th>Rows</th>
</thead>
<tr>
<td><input type="text" id="col"></td>
<td><input type="text" id="row"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Go-->"onclick="showFields()"></td>
</tr>
</table>
</form>
<div id="tbl1">
</div>
<div id="tbl2">
</div>
</div>
</body>
</html>


Yes I do have too much time on my hands at work this month. :p

Could use a table head aspect but hey I'm done playing with it.

Basscyst