www.webdeveloper.com
Results 1 to 5 of 5

Thread: Let javascript remove table, and replace with <div>

  1. #1
    Join Date
    Feb 2011
    Posts
    7

    Let javascript remove table, and replace with <div>

    Hi, got a question.

    I'm working on a CPU-graph with ajax.
    I now have a table that shows it's percentage.
    I want to be able to, when I click on the table, it replaces the table with a <div> of the same size.

    I already got all the code, and basically I'm just asking for table replacement on clicking it so no need to show any of that, i believe.

    The base structure is like this:
    HTML Code:
    <table width="300" height="200" onclick="--function to replace--">
    content
    </table>
    
    <div id="chart" width="300" height="200"></div>
    Thanks in advance.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Try:

    onclick="this.parentNode.replaceChild(document.getElementById('chart'),this)"

    or, to keep the separation:
    Code:
    // in javascript
    function replaceTab(tab){
    tab.parentNode.replaceChild(document.getElementById('chart'),tab)
    }
    //
    //in HTML
    onclick="replaceTab(this)"
    Last edited by Kor; 04-14-2011 at 08:35 AM.

  3. #3
    Join Date
    Feb 2011
    Posts
    7
    Thanks for the quick reply.

    The problem is, the <div> isn't supposed to be on the page already, so it would be impossible to select it already, right?

    Simply put, I want it to remove <table>, then 'write' the <div>, and then execute the function.

    Thanks!

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Then you should create that div, right?:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function replaceTab(tab){
    var div=document.createElement('div');
    div.id="chart";
    tab.parentNode.replaceChild(div,tab)
    }
    </script>
    <style type="text/css">
    #chart {
    width:300px;
    height:300px;
    border:solid 1px #ff0000;
    }
    #mytable {
    border-collapse:collapse;
    width:300px;
    height:300px;
    border:solid 1px #ff00ff;
    }
    </style>
    </head>
    <body>
    <table id="mytable" onclick="replaceTab(this)">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <br>
    <br>
    </body>
    </html>

  5. #5
    Join Date
    Feb 2011
    Posts
    7
    It's that easy to create an element!?

    I'll try that in a minute.
    Thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles