By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,676 Members | 1,636 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,676 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.