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

David Bradbury · Nov 2, 2004

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.

David Bradbury · Nov 3, 2004

Excellent. That's exactly the sort of thing. Is it possible to make
the cells editable?

mscir said:
David Bradbury wrote:

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.

Click to expand...

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.document;
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           
<input type="text" name="rows" id="rows" size="10" value="4">
<br>Columns      
<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>

I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
creating an interactive table	5	Sep 7, 2006
Help with code	0	Jun 12, 2022
Creating a table in javascript	4	May 30, 2006
Creating Table with Javascript abd Adding Events dynamically to each	0	Jul 15, 2008
Button in texteditor	10	Jul 9, 2005
window.close	3	Jun 12, 2009

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

David Bradbury

David Bradbury

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads