Converting rows into columns

Discussion in 'Javascript' started by javesh, Aug 25, 2009.

  1. javesh

    javesh Guest

    I am displaying a few fields in a table as below

    <table>
    <tr><td>field1</td></tr>
    <tr><td>field2</td></tr>
    <tr><td>field3</td></tr>
    <tr><td>field4</td></tr>
    <tr><td>field5</td></tr>
    </table>

    I have a link to append a new table with the same fields. What I would
    like to do is when I click on "Append new table" link, I would like to
    convert all the existing fields in the table in a single row instead
    of displaying them by columns. Can somebody give me some inputs on how
    I could go about implementing it

    -
    Anush
    javesh, Aug 25, 2009
    #1
    1. Advertising

  2. In comp.lang.javascript message <68464e12-f346-471e-94c1-dd27ee2477e3@b1
    5g2000yqd.googlegroups.com>, Tue, 25 Aug 2009 04:39:55, javesh
    <> posted:
    >I am displaying a few fields in a table as below
    >
    ><table>
    > <tr><td>field1</td></tr>
    > <tr><td>field2</td></tr>
    > <tr><td>field3</td></tr>
    > <tr><td>field4</td></tr>
    > <tr><td>field5</td></tr>
    ></table>
    >
    >I have a link to append a new table with the same fields. What I would
    >like to do is when I click on "Append new table" link, I would like to
    >convert all the existing fields in the table in a single row instead
    >of displaying them by columns. Can somebody give me some inputs on how
    >I could go about implementing it



    This illustrates a rather crude approach, briefly tested in FF 3.0.13,
    Safari 4, and Chrome 2. As is, fails in IE 8 & Opera 9.64.

    <table ID=XX border=1>
    <tr><td>field1</td></tr>
    <tr><td>field2</td></tr>
    <tr><td>field3</td></tr>
    <tr><td>field4</td></tr>
    <tr><td>field5</td></tr>
    </table>

    <input type=button onClick="ZZ()">

    <script>
    function ZZ() { var T = document.getElementById("XX")
    T.innerHTML = T.innerHTML.replace(/<\/tr>\s+<tr>/g, "") }
    </script>


    It would be more elegant to traverse the table with DOM methods, read
    the fields, insert them all in the first row, and delete the other rows.

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 7.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
    free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/> unsupported.
    Dr J R Stockton, Aug 25, 2009
    #2
    1. Advertising

  3. In comp.lang.javascript message <
    rlyn.invalid>, Tue, 25 Aug 2009 22:12:21, Dr J R Stockton
    <> posted:

    >This illustrates a rather crude approach, briefly tested in FF 3.0.13,
    >Safari 4, and Chrome 2. As is, fails in IE 8 & Opera 9.64.
    >
    ><table ID=XX border=1>
    > <tr><td>field1</td></tr>
    > <tr><td>field2</td></tr>
    > <tr><td>field3</td></tr>
    > <tr><td>field4</td></tr>
    > <tr><td>field5</td></tr>
    ></table>
    >
    ><input type=button onClick="ZZ()">
    >
    ><script>
    >function ZZ() { var T = document.getElementById("XX")
    > T.innerHTML = T.innerHTML.replace(/<\/tr>\s+<tr>/g, "") }
    ></script>


    The RegExp must be /<\/tr>\s*<tr>/ig works in Firefox, Safari, Chrome.
    In IE8, the assignment to T.innerHTML raises "Unknown runtime error".

    That is fixed by using

    <div ID=XX>
    <table border=1>
    <tr><td>field1</td></tr>
    <tr><td>field2</td></tr>
    <tr><td>field3</td></tr>
    <tr><td>field4</td></tr>
    <tr><td>field5</td></tr>
    </table>
    </div>

    and that, with the revised RegExp, works with all five browsers.

    --
    (c) John Stockton, nr London UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/&c., FAQqy topics & links;
    <URL:http://www.merlyn.demon.co.uk/clpb-faq.txt> RAH Prins : c.l.p.b mFAQ;
    <URL:ftp://garbo.uwasa.fi/pc/link/tsfaqp.zip> Timo Salmi's Turbo Pascal FAQ.
    Dr J R Stockton, Aug 26, 2009
    #3
  4. In comp.lang.javascript message <Vv2dnSiMB48mIQjXnZ2dnUVZ_tqdnZ2d@gigane
    ws.com>, Wed, 26 Aug 2009 18:52:43, kangax <> posted:


    >Does it also work if one of the </tr> tags has a following &nbsp;? If
    >&nbsp; is interpreted as U+00A0, then /\s/ in IE should fail to match
    >it.


    It does (using Firefox), because the &nbsp;, while in the .innerHTML as
    written (i.e. not \u00A0), there precedes the table. But, AIUI, that's
    not a good place to put text.


    >Speaking of /\s/, I have finally made a simple table of browser
    >compatibility (similar to what you did, but using Richard's test) to
    >get a better picture of common deviations:
    >
    ><http://thinkweb2.com/projects/prototype/whitespace-deviations/>



    That's impressively unreadable, by default. My set font face and size
    are overridden, your lines are too long. To read the black-background
    stuff at the bottom, I have to do Select All.

    I suggest putting the hex code first, for visual alignment, and, in it,
    not using ×. That's not the right character, and looks silly
    there. I'd also put the characters in Unicode order, drop the word
    ASCII, and have lines for ECMA 3 & 5.

    It's not clear whether you tested all 65536 characters. Compliance
    requires that not only must \s detect all the right characters; it must
    also not detect all the wrong ones.

    I suspect that there is a need to say which OS was used, as well as
    which browser.

    ECMA 5 final draft requires NEL = \u0085 and BOM = \uFEFF to match \s.

    For one of your respondents : ECMA FD5 and "ECMAScript Language
    Specification Edition 3 24-Mar-00" require \w to match ONLY
    a-z A-Z 0-9 _ .


    Your page refers to "jQeury".

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Dr J R Stockton, Aug 27, 2009
    #4
  5. In comp.lang.javascript message <meidnRzrVtPg7wrXnZ2dnUVZ_uydnZ2d@gigane
    ws.com>, Fri, 28 Aug 2009 02:00:29, kangax <> posted:
    >Dr J R Stockton wrote:
    >> In comp.lang.javascript message <Vv2dnSiMB48mIQjXnZ2dnUVZ_tqdnZ2d@gigane
    >> ws.com>, Wed, 26 Aug 2009 18:52:43, kangax <> posted:


    >>> Speaking of /\s/, I have finally made a simple table of browser
    >>> compatibility (similar to what you did, but using Richard's test) to
    >>> get a better picture of common deviations:
    >>>
    >>> <http://thinkweb2.com/projects/prototype/whitespace-deviations/>

    >> That's impressively unreadable, by default. My set font face and
    >>size
    >> are overridden, your lines are too long. To read the black-background
    >> stuff at the bottom, I have to do Select All.

    >
    >Shouldn't user defined stylesheet take precedence? What exactly am I
    >overriding and what do you mean by lines being too long? Page width
    >should fit into 1024 (as intended).


    Perhaps user defined stylesheets would. But it should not be necessary
    to have such; and I've looked in the Help of a couple of browsers and
    found nothing on the subject. The main-text settings in the browser
    itself should not be overruled by a seriously informative site.

    You overrule, as I said, font face and size; and you force lines to
    1024px or thereabouts. That's wider than many computers have; and I
    prefer not to read full-screen. The window of an informative site
    should be able to sit beside a window relating to that information.


    >> I'd also
    >> drop the word
    >> ASCII, and have lines for ECMA 3 & 5.

    >
    >Why remove ASCII? Will think about adding note on ES3/5.


    ASCII is outdated; JavaScript uses Unicode, and the numerical overlap is
    irrelevant.

    >> It's not clear whether you tested all 65536 characters. Compliance
    >> requires that not only must \s detect all the right characters; it must
    >> also not detect all the wrong ones.

    >
    >I haven't tested all 65536 characters. The test was made by Cornford; I
    >didn't modify it.


    That is only half a test. Testing all characters takes a fraction of a
    second, no more. Cornford has not been noted for brevity.

    >Yes, /\s/ matching non-space characters is a faulty /\s/. Looking at
    >your results, I can't find any characters that are considered
    >whitespace by clients but shouldn't. Did I miss them?


    Browsers match 000a & 000d to \s; ECMA Final Draft 5 does not; it has
    0085 instead. And it has feff. Perhaps you did not see that the green
    textarea in <http://www.merlyn.demon.co.uk/js-valid.htm#RsT> scrolls?

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
    Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)
    Dr J R Stockton, Aug 29, 2009
    #5
  6. Dr J R Stockton <> writes:

    > Browsers match 000a & 000d to \s; ECMA Final Draft 5 does not; it has
    > 0085 instead. And it has feff. Perhaps you did not see that the green
    > textarea in <http://www.merlyn.demon.co.uk/js-valid.htm#RsT> scrolls?


    The ECMAScript 5 draft does specify CR and LF as RegExp space characters.
    It requires \s to match WhiteSpace (7.2) *and* LineTerminator (7.3),
    for a total of 28 (Using Unicode version 4.0.1).

    The current browsers I have checked support the following;

    IE8 Firefox 3.5 Opera 10rc Safari 4 Google Chrome 3
    0x09 x x x x x
    0x0a x x x x x
    0x0b x x x x x
    0x0c x x x x x
    0x0d x x x x x
    0x20 x x x x x
    0x85 (none)
    0xa0 x x x x
    0x1680 x x
    0x180E x x
    0x2000 x x x x
    0x2001 x x x x
    0x2002 x x x x
    0x2003 x x x x
    0x2004 x x x x
    0x2005 x x x x
    0x2006 x x x x
    0x2007 x x x x
    0x2008 x x x x
    0x2009 x x x x
    0x200A x x x x
    0x200b x x
    0x2028 x x x x
    0x2029 x x x x
    0x202F x x x
    0x205F x x
    0x3000 x x x x
    0xfeff (none)

    IE only considers ASCII.
    Firefox appears to be based on Unicode 2.1.4 (or earlier).
    Opera does not appear to be based on a specific Unicode version (they
    include 0x202f, but not 0x1680, both of which were introduced in
    Unicode 3.0.0).
    Safari and Google Chrome appears to be based on the current version
    of Unicode (4.0.1 or later all agree).

    Only 0x85 and 0xfeff are new in ECMAScript 5. Code point 0x200b used to be
    in Zs, but was changed to Cf between Unicode version 4.0.0 and 4.0.1.
    (Which goes to prove that you shouldn't let one standard depend on
    another without saying which version of the other you refer to, and
    not just say "Version 2.1 or later" :).

    /L
    --
    Lasse Reichstein Holst Nielsen
    'Javascript frameworks is a disruptive technology'
    Lasse Reichstein Nielsen, Aug 30, 2009
    #6
  7. javesh

    paolochiodi Guest

    On Aug 25, 11:12 pm, Dr J R Stockton <>
    wrote:
    > In comp.lang.javascript message <68464e12-f346-471e-94c1-dd27ee2477e3@b1
    > 5g2000yqd.googlegroups.com>, Tue, 25 Aug 2009 04:39:55, javesh
    > <> posted:
    >
    > >I am displaying a few fields in a table as below

    >
    > ><table>
    > >  <tr><td>field1</td></tr>
    > >  <tr><td>field2</td></tr>
    > >   <tr><td>field3</td></tr>
    > >    <tr><td>field4</td></tr>
    > >    <tr><td>field5</td></tr>
    > ></table>

    >
    > >I have a link to append a new table with the same fields. What I would
    > >like to do is when I click on "Append new table" link, I would like to
    > >convert all the existing fields in the table in a single row instead
    > >of displaying them by columns. Can somebody give me some inputs on how
    > >I could go about implementing it

    >
    > This illustrates a rather crude approach, briefly tested in FF 3.0.13,
    > Safari 4, and Chrome 2.  As is, fails in IE 8 & Opera 9.64.
    >
    > <table ID=XX border=1>
    >   <tr><td>field1</td></tr>
    >   <tr><td>field2</td></tr>
    >    <tr><td>field3</td></tr>
    >     <tr><td>field4</td></tr>
    >     <tr><td>field5</td></tr>
    > </table>
    >
    > <input type=button onClick="ZZ()">
    >
    > <script>
    > function ZZ() { var T = document.getElementById("XX")
    >   T.innerHTML = T.innerHTML.replace(/<\/tr>\s+<tr>/g, "") }
    > </script>
    >
    > It would be more elegant to traverse the table with DOM methods, read
    > the fields, insert them all in the first row, and delete the other rows.
    >
    > --
    >  (c) John Stockton, nr London, UK. ?  Turnpike v6.05  IE 7.
    >  Web  <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms,& links.
    >  I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
    >  free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/> unsupported.


    I would go for dom traversing. Although maybe slower it is more
    standard. What happens to regexp method when html is malformed? Or
    when having attributes?
    paolochiodi, Aug 30, 2009
    #7
  8. In comp.lang.javascript message <92db06b2-b713-4fe0-b6e3-a28137abe957@k2
    6g2000vbp.googlegroups.com>, Sun, 30 Aug 2009 03:05:12, paolochiodi
    <> posted:
    >On Aug 25, 11:12 pm, Dr J R Stockton <>
    >wrote:


    >> It would be more elegant to traverse the table with DOM methods, read
    >> the fields, insert them all in the first row, and delete the other rows.
    >>
    >> --
    >>  (c)


    :-(

    >I would go for dom traversing. Although maybe slower it is more
    >standard. What happens to regexp method when html is malformed? Or
    >when having attributes?


    The code and the table run on the same page. The author will therefore
    need to not malform his code, and to either not add attributes there or
    modify the RegExp to allow for them.

    Perhaps the OP would appreciate your code for doing it with DOM methods.

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links;
    Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
    No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
    Dr J R Stockton, Aug 31, 2009
    #8
  9. In comp.lang.javascript message <>, Sun, 30 Aug
    2009 03:30:25, Lasse Reichstein Nielsen <> posted:
    >Dr J R Stockton <> writes:
    >
    >> Browsers match 000a & 000d to \s; ECMA Final Draft 5 does not; it has
    >> 0085 instead. And it has feff. Perhaps you did not see that the green
    >> textarea in <http://www.merlyn.demon.co.uk/js-valid.htm#RsT> scrolls?

    >
    >The ECMAScript 5 draft does specify CR and LF as RegExp space characters.
    >It requires \s to match WhiteSpace (7.2) *and* LineTerminator (7.3),


    Agreed.

    >for a total of 28 (Using Unicode version 4.0.1).


    I'd be reluctant to consider a character as specified unless its number,
    or a range of numbers including it, actually appear in the Standard
    (unless it gives something like an algorithm for extracting the numbers
    from some other uniquely-specified immutable document. I think 12 are
    actually specified in FD5.


    >Only 0x85 and 0xfeff are new in ECMAScript 5. Code point 0x200b used to be
    >in Zs, but was changed to Cf between Unicode version 4.0.0 and 4.0.1.


    >(Which goes to prove that you shouldn't let one standard depend on
    >another without saying which version of the other you refer to, and
    >not just say "Version 2.1 or later" :).


    Certainly one must indicate the version; but I think I might accept also
    specifying "the latest version" as an acknowledgedly moving target.

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05.
    Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
    PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
    Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.
    Dr J R Stockton, Aug 31, 2009
    #9
  10. javesh

    RobG Guest

    On Sep 1, 3:23 am, Dr J R Stockton <>
    wrote:
    > In comp.lang.javascript message <92db06b2-b713-4fe0-b6e3-a28137abe957@k2
    > 6g2000vbp.googlegroups.com>, Sun, 30 Aug 2009 03:05:12, paolochiodi
    > <> posted:
    >
    > >On Aug 25, 11:12 pm, Dr J R Stockton <>
    > >wrote:
    > >> It would be more elegant to traverse the table with DOM methods, read
    > >> the fields, insert them all in the first row, and delete the other rows.


    And more reliable too, particularly if the cells contain other
    elements.

    [...]
    > >I would go for dom traversing. Although maybe slower it is more
    > >standard. What happens to regexp method when html is malformed? Or
    > >when having attributes?

    >
    > The code and the table run on the same page.  The author will therefore
    > need to not malform his code, and to either not add attributes there or
    > modify the RegExp to allow for them.


    innerHTML is implemented differently on different platforms, depending
    on the complexity of the markup it may work OK, but it may not. DOM
    methods are likely to be more robust, but still not bullet-proof.

    >
    > Perhaps the OP would appreciate your code for doing it with DOM methods.


    Here's a quick example, assuming a one-column table where the number
    of rows is equal to the required number of columns:

    <script type="text/javascript">

    // Move all cells in source table to a single row
    // in target table
    function column2row(sourceId, targetId) {

    // Get references to the tables
    var sourceTable = document.getElementById(sourceId);
    var targetTable = document.getElementById(targetId);

    // Collect the cells
    var cells = sourceTable.getElementsByTagName('td');

    // Create a new row at the bottom of the target table
    var row = targetTable.insertRow(-1);

    // Move all the cells
    while (cells.length) {
    row.appendChild(cells[0]);
    }

    // May wish to remove the empty source table
    sourceTable.parentNode.removeChild(sourceTable);
    }

    </script>

    <table id="t0">
    <tr><td>zero
    <tr><td>one
    <tr><td>two
    </table>

    <table id="t1">
    <tr><td>A<td>B<td>C
    </table>

    <input type="button" value="Move cells"
    onclick="column2row('t0', 't1');">


    --
    Rob
    RobG, Sep 1, 2009
    #10
    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. Erik Cruz

    Turning rows into columns

    Erik Cruz, Sep 25, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    2,829
    Hermit Dave
    Sep 25, 2004
  2. helpful sql
    Replies:
    0
    Views:
    791
    helpful sql
    May 19, 2005
  3. wayne
    Replies:
    0
    Views:
    593
    wayne
    Nov 17, 2003
  4. enggr
    Replies:
    0
    Views:
    1,620
    enggr
    Jun 30, 2010
  5. Replies:
    9
    Views:
    136
    Sam Smoot
    Aug 11, 2006
Loading...

Share This Page