471,071 Members | 1,188 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,071 software developers and data experts.

Creating an "Insert table function" for use in an Iframe

I currently have an iframe on a webpage into which users can insert
content. They can further customise the text as I've included buttons
such as Bold, Italic, Bullet point etc. This is done along the lines
of

<td><div class="cbtn" onClick="cmdExec('bold',idContent)"
onmouseover="button_over(this);" onmouseout="button_out(this);"
onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Bold.gif"
alt="Bold">
</div></td>

But has anyone found a way of creating a table for insertion in an
Iframe. A much bigger task I realise but I'm not keen on users copying
tables from Word and inserting them into the iframe.
Jul 23 '05 #1
2 2753
David Bradbury wrote:

<snip>
But has anyone found a way of creating a table for insertion in an
Iframe. A much bigger task I realise but I'm not keen on users copying
tables from Word and inserting them into the iframe.


How about this approach:

<script type="text/javascript">
function buildiframetable() {
var f = document.forms['form1'];
var tdpad = +f.tdpad.value;
var tdspace = +f.tdspace.value;
var tborder = +f.tborder.value;
var rows = +f.rows.value;
var cols = +f.cols.value;
var d = document.getElementById('iframe1').contentWindow.d ocument;
var table = d.createElement('table');
table.border = tborder;
table.cellPadding = tdpad;
table.cellSpacing = tdspace;
var tbody = d.createElement('tbody');
for (var i=0; i<rows; i++) {
var row = d.createElement('tr');
for (var j=0; j<cols; j++) {
var cell = d.createElement('td');
cell.appendChild(d.createTextNode(i + ', ' + j));
row.appendChild(cell);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
d.body.appendChild(table)
}
</script>
</head>

<body>
<p>Build Table Dynamically with Javascript</p>
<form name='form1' id='form1'>
<br><b>Table Parameters</b>
<br>Rows&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="rows" id="rows" size="10" value="4">
<br>Columns&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="cols" id="cols" size="10" value="6">
<br>Border Thickness <input type="text" name="tborder" id="tborder"
size="6" value="6">
<br>Cell Spacing <input type="text" name="tdspace" id="tdspace"
size="10" value="2">
<br>Cell Padding <input type="text" name="tdpad" id="tdpad" size="10"
value="2">
<br><input type="button" value="Build Iframe Table"
onclick="buildiframetable()">
</form>
<hr>
<iframe name='iframe1' id='iframe1' width=300 height=300></iframe>
</body>
</html>

Jul 23 '05 #2
Excellent. That's exactly the sort of thing. Is it possible to make
the cells editable?
mscir <ms***@access4less.net> wrote in message news:<10*************@corp.supernews.com>...
David Bradbury wrote:

<snip>
But has anyone found a way of creating a table for insertion in an
Iframe. A much bigger task I realise but I'm not keen on users copying
tables from Word and inserting them into the iframe.


How about this approach:

<script type="text/javascript">
function buildiframetable() {
var f = document.forms['form1'];
var tdpad = +f.tdpad.value;
var tdspace = +f.tdspace.value;
var tborder = +f.tborder.value;
var rows = +f.rows.value;
var cols = +f.cols.value;
var d = document.getElementById('iframe1').contentWindow.d ocument;
var table = d.createElement('table');
table.border = tborder;
table.cellPadding = tdpad;
table.cellSpacing = tdspace;
var tbody = d.createElement('tbody');
for (var i=0; i<rows; i++) {
var row = d.createElement('tr');
for (var j=0; j<cols; j++) {
var cell = d.createElement('td');
cell.appendChild(d.createTextNode(i + ', ' + j));
row.appendChild(cell);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
d.body.appendChild(table)
}
</script>
</head>

<body>
<p>Build Table Dynamically with Javascript</p>
<form name='form1' id='form1'>
<br><b>Table Parameters</b>
<br>Rows&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="rows" id="rows" size="10" value="4">
<br>Columns&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="cols" id="cols" size="10" value="6">
<br>Border Thickness <input type="text" name="tborder" id="tborder"
size="6" value="6">
<br>Cell Spacing <input type="text" name="tdspace" id="tdspace"
size="10" value="2">
<br>Cell Padding <input type="text" name="tdpad" id="tdpad" size="10"
value="2">
<br><input type="button" value="Build Iframe Table"
onclick="buildiframetable()">
</form>
<hr>
<iframe name='iframe1' id='iframe1' width=300 height=300></iframe>
</body>
</html>

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by newbie_mw | last post: by
1 post views Thread by newbie_mw | last post: by
20 posts views Thread by Mark Harrison | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.