Let javascript remove table, and replace with <div>

This site is best viewed in a modern browser with JavaScript enabled.

Let javascript remove table, and replace with <div>

Quanno

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:

<table width="300" height="200" onclick="--function to replace--">
content
</table>

<div id="chart" width="300" height="200"></div>

Thanks in advance.

Kor

Try:

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

or, to keep the separation:

// in javascript
function replaceTab(tab){
tab.parentNode.replaceChild(document.getElementById('chart'),tab)
}
//
//in HTML
onclick="replaceTab(this)"

Quanno

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

Then you should create that div, right?:

<!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

It's that easy to create an element!?

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