Conversion from a HTML element to table element

[vinayak]

Is there any way to convert a html element like <div> to a table,
using javascript and/or css?
Here is example that I need to work on:

I have a div in a page like:
<div id="myDiv">some text</div>

Now in script, i need to do followings:

var t = document.getElementById("myDiv");
var r = t.insertRow(0);
.......

The insertRow() function is not defined for object t (because it is a
div element).
If it had been a table, it would not had been a problem.
I need to convert the div (or can be other tags) to the table.

 

[Erwin Moller]

Is there any way to convert a html element like <div> to a table,
using javascript and/or css?
Here is example that I need to work on:

I have a div in a page like:
<div id="myDiv">some text</div>

Now in script, i need to do followings:

var t = document.getElementById("myDiv");
var r = t.insertRow(0);
......

The insertRow() function is not defined for object t (because it is a
div element).

indeed.
So why do you try an insertRow on a div?

If it had been a table, it would not had been a problem.
I need to convert the div (or can be other tags) to the table.

It is hard to tell what you need.
Does the content of myDiv contain some information that can be parsed to
a table, and if so: how? Do you use colseperators or rowseperators?

Or do you want a table that holds only one td that contains the former
content of the div?

Erwin Moller

 

[Thomas 'PointedEars' Lahn]

Is there any way to convert a html element like <div> to a table,

How did you get the impression that `table' was not an HTML element type?

using javascript and/or css?

Probably, but the attempt alone would be foolish. If it is tabular data,
then use tables in the first place; if it is not tabular data, then you
should not use tables.


PointedEars

 

[SAM]

vinayak a écrit :

Is there any way to convert a html element like <div> to a table,
using javascript and/or css?

Difficult to answer without knowing the html code to "convert".
(answer to your case: see below - further down)

Do the futures rows (TR) are tag P ?
Do the futures cells are tad SPAN ?
Or will you have to work on a list (UL LI) ?

ie :
<div id=foo>
<div>
<p>R1-C1</p>
<p>R1-C2</p>
</div>
<div>
<p>R2-C1</p>
<p>R2-C2</p>
</div>
</div>


By CSS (but what does IE with that ?) :

#foo { display: table }
#foo div { display: table-row }
#foo div p { display: table-cell }

By JS (content of div 'foo' to table) :

function divToTable(id) {
var html = '<table>';
var D = document.getElementById(id); };
var R = D.getElementsByTagName('DIV');
if(D && D.length>0) {
for(var i=0; i<D.length; i++) {
html == '<tr>';
var C = D.getElementsByTagName('P');
for(var j=0; j<C.length; j++) {
html += '<td'>'+C[j].innerHTML+'<\/td>';
}
html += '<\/tr>';
}
html += '<\/table>';
}
D.innerHTML = html;
}

Here is example that I need to work on:

I have a div in a page like:
<div id="myDiv">some text</div>

Now in script, i need to do followings:

var t = document.getElementById("myDiv");

try here :

t.style.display = 'table';
or
t.tagName = 'TABLE';

var r = t.insertRow(0);
......

The insertRow() function is not defined for object t (because it is a
div element).
If it had been a table, it would not had been a problem.
I need to convert the div (or can be other tags) to the table.

var t = documement.createElement('TABLE');
var tb = document.createElement('TBODY');
t.appendChild(tb);
var r = tb.insertRow(0);
.... and so on
var d = document.getElementById("myDiv");
d.parentNode.replaceChild(t, d);
}

 

[vinayak]

To Thomas: Yes, I know table is a HTMLElement. I want to convert other
general HTMLElement to a HTMLTableElement. The 'other' element would
normally be a <div>

To Erwin: Sorry, I should had been clear enough. What I want to
achieve is like following:
I want to transform div object like: <div id="myBox">some contents</
div>
to: <table id="myBox"><tr><td>some contents</td></tr></table>
The reason is I want to make a javascript function to convert
specified div layers to a standard format, that would have a standard
css, rounded borders, close buttons, draggable, etc. It is really
necessary for me to convert to a table to put those rounded corners
and other things. Guys, dont tell me to add other html (using
insertAdjacentHTML() functions).

To SAM:
As a general javascript programmer, we tend to convert using
innerHTML. I myself am implementing those, and it is so easy.
So for above, as per your suggestion js codes would be like:
var layer = document.getElementById("myBox");
layer.innerHTML = "<table><tr><td>" + layer.innerHTML + "</td></tr></
table>";
But generally it is unknown to programmer that innerHTML is culprit to
cause memory leak problems (I think only in IE).
I have very complex user interface page/layers with lots of buttons,
links and other form elements. When we use codes like above,
first all the elements inside the <div> are removed, and then they are
regenerated. The browser's garbage collector is poor,
so the removed items are not really removed. And when it is huge
number of items, it is going to cause problems.
Proper method is to use DOM functions like insertNode(), removeNode(),
etc.

I am having browser crash issue (in IE), using this innerHTML
approach; so now I am looking forward to convert this method to
some DOM based implementations.

 

[Thomas 'PointedEars' Lahn]

[...]
The reason is I want to make a javascript function to convert
specified div layers to a standard format, that would have a standard
css, rounded borders, close buttons, draggable, etc. It is really
necessary for me to convert to a table to put those rounded corners
and other things.

Not at all.

Guys, dont tell me to add other html [...]

Tough luck.

(using insertAdjacentHTML() functions).

insertAdjacentHTML() is MSHTML-proprietary. Learn about the W3C DOM.


PointedEars