Let javascript remove table, and replace with <div>

**Quanno** · 04-14-2011 08:12 AM

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.

**Kor** · 04-14-2011 08:27 AM

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)"

**Quanno** · 04-14-2011 08:36 AM

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!

**Kor** · 04-14-2011 08:45 AM

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>

**Quanno** · 04-14-2011 08:49 AM

It's that easy to create an element!?

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

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

Thread Tools

Display

Let javascript remove table, and replace with <div>

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions