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

Discussion in 'Javascript' started by David Bradbury, Nov 2, 2004.

  1. 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 2, 2004
    #1
    1. Advertising

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


    mscir <> wrote in message news:<>...
    > 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.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&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>
     
    David Bradbury, Nov 3, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    693
  2. mi
    Replies:
    4
    Views:
    13,696
    dorayme
    May 21, 2008
  3. elca
    Replies:
    0
    Views:
    581
  4. Scott
    Replies:
    6
    Views:
    964
    [MSFT]
    Apr 14, 2004
  5. Daedalous
    Replies:
    3
    Views:
    725
    Daedalous
    Jan 16, 2004
Loading...

Share This Page