Conversion from a HTML element to table element

Discussion in 'Javascript' started by vinayak, Jan 16, 2008.

  1. vinayak

    vinayak Guest

    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.
    vinayak, Jan 16, 2008
    #1
    1. Advertising

  2. vinayak

    Erwin Moller Guest

    vinayak wrote:
    > 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
    Erwin Moller, Jan 16, 2008
    #2
    1. Advertising

  3. vinayak wrote:
    > 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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
    Thomas 'PointedEars' Lahn, Jan 16, 2008
    #3
  4. vinayak

    SAM Guest

    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);
    }


    --
    sm
    SAM, Jan 16, 2008
    #4
  5. vinayak

    vinayak Guest

    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.
    vinayak, Jan 18, 2008
    #5
  6. vinayak wrote:
    > [...]
    > 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Jan 18, 2008
    #6
    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. David Williams
    Replies:
    2
    Views:
    1,105
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. Rio
    Replies:
    4
    Views:
    1,172
  3. Patient Guy
    Replies:
    8
    Views:
    744
    Roy Schestowitz
    Feb 13, 2005
  4. TS
    Replies:
    5
    Views:
    3,649
    Steven Cheng[MSFT]
    Aug 16, 2007
Loading...

Share This Page