Converting rows into columns

[javesh]

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

 

[Dr J R Stockton]

In comp.lang.javascript message <68464e12-f346-471e-94c1-dd27ee2477e3@b1
5g2000yqd.googlegroups.com>, Tue, 25 Aug 2009 04:39:55, javesh

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.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
rlyn.invalid>, Tue, 25 Aug 2009 22:12:21, Dr J R Stockton

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.

 

[Dr J R Stockton]

In comp.lang.javascript message <Vv2dnSiMB48mIQjXnZ2dnUVZ_tqdnZ2d@gigane

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

 

[Dr J R Stockton]

In comp.lang.javascript message <meidnRzrVtPg7wrXnZ2dnUVZ_uydnZ2d@gigane

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.

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

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

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?

 

[Lasse Reichstein Nielsen]

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

 

[paolochiodi]

In comp.lang.javascript message <68464e12-f346-471e-94c1-dd27ee2477e3@b1
5g2000yqd.googlegroups.com>, Tue, 25 Aug 2009 04:39:55, javesh




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. [email protected]  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?

 

[Dr J R Stockton]

In comp.lang.javascript message <92db06b2-b713-4fe0-b6e3-a28137abe957@k2
6g2000vbp.googlegroups.com>, Sun, 30 Aug 2009 03:05:12, paolochiodi

On Aug 25, 11:12 pm, Dr J R Stockton <[email protected]>
wrote:
:-(

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.

 

[Dr J R Stockton]

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.

 

[RobG]

In comp.lang.javascript message <92db06b2-b713-4fe0-b6e3-a28137abe957@k2
6g2000vbp.googlegroups.com>, Sun, 30 Aug 2009 03:05:12, paolochiodi

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

[...]

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