Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #23370 > unrolled thread

Reversing the rows of a table ??

Back to article view | Back to comp.lang.javascript

Contents

  Reversing the rows of a table ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2014-03-03 16:57 -0700
    Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-04 01:15 +0100
    Re: Reversing the rows of a table ?? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-03-03 16:19 -0800
      Re: Reversing the rows of a table ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2014-03-03 17:31 -0700
        Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-04 01:36 +0100
        Re: Reversing the rows of a table ?? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-03-03 18:51 -0800
          Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-04 08:57 +0100
          Re: Reversing the rows of a table ?? Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2014-03-04 09:13 +0100
            Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-04 09:49 +0100
          Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-04 12:16 +0100
            Re: Reversing the rows of a table ?? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-03-04 06:37 -0800
              Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-04 15:56 +0100
                Re: Reversing the rows of a table ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2014-03-04 09:10 -0700
                  Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-04 17:56 +0100
                  Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-04 21:47 +0100
                    Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-04 22:38 +0100
                      Re: Reversing the rows of a table ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2014-03-04 15:46 -0700
                        Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-05 00:18 +0100
                      Re: Reversing the rows of a table ?? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-03-04 16:17 -0800
                        Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-05 09:06 +0100
                          Re: Reversing the rows of a table ?? Christoph Michael Becker <cmbecker69@arcor.de> - 2014-03-05 17:49 +0100
                      Re: Reversing the rows of a table ?? Christian Winter <thepoet_nospam@arcor.de> - 2014-03-05 06:50 +0100
                        Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-05 09:07 +0100
                        Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-05 16:42 +0100
                          Re: Reversing the rows of a table ?? Christian Winter <thepoet_nospam@arcor.de> - 2014-03-06 07:28 +0100
                            Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-06 10:58 +0100
                            Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-06 11:11 +0100
                              Re: Reversing the rows of a table ?? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-03-06 10:35 -0300
                Re: Reversing the rows of a table ?? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-03-04 11:06 -0800
                  Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-04 20:22 +0100
                  Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-04 20:55 +0100
    Re: Reversing the rows of a table ?? ompalompasales2@gmail.com - 2014-03-04 12:59 -0800
    Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-05 23:05 +0100
      Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-05 23:42 +0100
        Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-06 14:57 +0100
          Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-06 22:37 +0100
            Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-06 23:04 +0100
              Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-06 23:20 +0100
                Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-06 23:31 +0100
                  Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-07 00:30 +0100
                    Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-07 18:10 +0100
                      Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-07 22:49 +0100
              Re: Reversing the rows of a table ?? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-03-06 19:21 -0300
                Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-06 23:41 +0100
                  Re: Reversing the rows of a table ?? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-03-06 22:45 -0300
      Re: Reversing the rows of a table ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-05 23:47 +0100
        Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-06 14:57 +0100
      Re: Reversing the rows of a table ?? Denis McMahon <denismfmcmahon@gmail.com> - 2014-03-05 23:41 +0000
      Re: Reversing the rows of a table ?? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-03-06 18:56 -0300
        Re: Reversing the rows of a table ?? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-03-06 23:18 +0100
          Re: Reversing the rows of a table ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-06 23:24 +0100

Page 3 of 3 — ← Prev page 1 2 [3]

#23454

Thomas 'PointedEars' Lahn wrote:
> Cezary Tomczyk wrote:
[...]
>> When you set the "display" style property to "none" then it will change
>> the structure of view and everything must be redraw again, right?
>
> Depends on what you mean by “structure of the view”.

By "structure of view" I mean whole layout content structure. I was 
referring to "[...]whenever a style is changed that affects the 
layout[...]" (source: 
http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow).

>> Except, when when HTML element have a "position" style property set to
>> "absolute" or "fixed".
>
> Reflow will happen in any case, see
> <https://developers.google.com/speed/articles/reflow>.

As for "fixed" or "absolute" I am referring to 
http://dev.opera.com/articles/view/efficient-javascript/?page=3#minimalreflow

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#23455

Cezary Tomczyk wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Cezary Tomczyk wrote:
> [...]
>>> When you set the "display" style property to "none" then it will change
>>> the structure of view and everything must be redraw again, right?
>>
>> Depends on what you mean by “structure of the view”.
> 
> By "structure of view" I mean whole layout content structure. I was
> referring to "[...]whenever a style is changed that affects the
> layout[...]" (source:
> http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow).

“A style *is* changed that affects the layout” when you set the “display” or 
“visibility” style property of an element to a different value.
 
>>> Except, when when HTML element have a "position" style property set to
>>> "absolute" or "fixed".
>>
>> Reflow will happen in any case, see
>> <https://developers.google.com/speed/articles/reflow>.
> 
> As for "fixed" or "absolute" I am referring to
> http://dev.opera.com/articles/view/efficient-> javascript/?page=3#minimalreflow

Look at the table in the Google Dev article.

I find it hard to believe that Opera would not have done any reflow on 
changes of the “display” or “visibility” property values.  But even if that 
was the correct interpretation of the “-” in the table in that article, that 
article is dated March 28, *2012*.  So the point is moot now that Opera has 
switched to WebKit last year (*2013*), which does reflow also in that case.

BTW, the article you are referring to (it is also referred in the one that
I have referred to) is dated November 2, *2006*.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#23447

Em 06/03/2014 19:04, Cezary Tomczyk escreveu:
> Thomas 'PointedEars' Lahn wrote:
>> Cezary Tomczyk wrote:
> [...]
>
>>> Hiding table by using "display: none" before?
>>
>> Setting the “display” style property to "none" or the “visibility” style
>> property to "hidden" before.
>
> I think that the "display" style property causing reflow while the
> "visibility" style property not.
>
> However, when the HTML element will have "visibility" style property set
> to "hidden" and then the content will be changed, but not size of this
> HTML element then reflow will not be done. Otherwise, reflow will be done.
>

According to Stoyan Stefanov, hiding a DOM node with display: none 
causes reflow and repaint, whereas visibility: hidden causes repaint only.
<http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/>

-- 
Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]

#23450

Joao Rodrigues wrote:
[...]
> According to Stoyan Stefanov, hiding a DOM node with display: none
> causes reflow and repaint, whereas visibility: hidden causes repaint only.
> <http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/>

" [...] visibility: hidden (repaint only, because no geometry changes)" 
- I agree with that, however, try to manipulate with content on HTML 
element which have a "visibility" style property set to "hidden". In 
case when it change the geometry it will cause reflow as well.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#23452

On 06/03/2014 19:41, Cezary Tomczyk wrote:
> Joao Rodrigues wrote:
> [...]
>> According to Stoyan Stefanov, hiding a DOM node with display: none
>> causes reflow and repaint, whereas visibility: hidden causes repaint
>> only.
>> <http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/>
>
> " [...] visibility: hidden (repaint only, because no geometry changes)"
> - I agree with that, however, try to manipulate with content on HTML
> element which have a "visibility" style property set to "hidden". In
> case when it change the geometry it will cause reflow as well.
>

So Thomas' idea does not find ground as we realize that modifying 
visibility or display properties would cause at least two more reflows / 
repaints.

-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#23428

Cezary Tomczyk <cezary.tomczyk@gmail.com> wrote on 05 mrt 2014 in 
comp.lang.javascript:

> while (i >= 0) {

while (i) {

>  newTbody.appendChild(rows[i]);
>  i -= 1;

newTbody.appendChild(rows[i--]);

>  }
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#23439

Evertjan. wrote:
> Cezary Tomczyk <cezary.tomczyk@gmail.com> wrote on 05 mrt 2014 in
> comp.lang.javascript:
>
>> while (i >= 0) {
>
> while (i) {
>
>>   newTbody.appendChild(rows[i]);
>>   i -= 1;
>
> newTbody.appendChild(rows[i--]);
>
>>   }

Yes, it can be done in that way as well. However, personally I claim 
that for me is just less readable.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#23429

On Wed, 05 Mar 2014 23:05:05 +0100, Cezary Tomczyk wrote:


>          i = rows.length - 1;

i = rows.length;

>      while (i >= 0) {
>          newTbody.appendChild(rows[i]);
>          i -= 1;
>      }

while (i) newTbody.appendChild(rows[--i]);

or

while (i--) newTbody.appendChild(rows[i]);

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#23443

Em 05/03/2014 19:05, Cezary Tomczyk escreveu:
> Mel Smith wrote:
> [...]
>
>> Question:
>>
>>      Is there a 'quickie' ES/JS way to reverse the rows of the table
>> during
>> the onload process?
> [...]
>
> I would write it in that way:
>
> function reverseTableRows(tableId) {
>      var table = document.getElementById(tableId),
>          newTbody = document.createElement('tbody'),
>          oldTbody = table.tBodies[0], // assuming one tbody HTML element
>          rows = oldTbody.rows,
>          i = rows.length - 1;
>
>      while (i >= 0) {
>          newTbody.appendChild(rows[i]);
>          i -= 1;
>      }
>      oldTbody.parentNode.replaceChild(newTbody, oldTbody);
> }
>
> Benefit of above is that there is only one reflow.
>

I think that using *fragment* will speed the code up:

function reverseTableRows(tableId) {
   var table = document.getElementById(tableId),
       fragment = document.createDocumentFragment(),
       oldTbody = table.tBodies[0], // only reverse the first tbody
       rows = oldTbody.rows,
       i = rows.length;
   while (i) fragment.appendChild(rows[--i]);
   //oldTbody.parentNode.replaceChild(newTbody, oldTbody);
   oldTbody.appendChild(fragment);
}

-- 
Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]

#23445

Joao Rodrigues wrote:
[...]
> I think that using *fragment* will speed the code up:
[...]

I think it will not speed up so much, at least not in all browsers. 
Let's say we have:

1)
var elTemp = document.createElement('div');
[apply some operations to element here]
[append to DOM here]

and

2)
var fragment = document.createDocumentFragment();
[apply some operations to element here]
[append to DOM here]

The difference is that a document fragment disappears when you add it to 
the DOM.

I think that both scenarios have almost the same performance. (based on 
results from http://jsperf.com/createelement-vs-createdocumentfragment/4 
and _I know_ that jsperf may not be a confident source of benchmarks).

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#23448

Cezary Tomczyk wrote:

> Joao Rodrigues wrote:
> [...]
>> I think that using *fragment* will speed the code up:
> [...]
> 
> I think it will not speed up so much, at least not in all browsers.
> Let's say we have:
> 
> 1)
> var elTemp = document.createElement('div');
> [apply some operations to element here]
> [append to DOM here]
> 
> and
> 
> 2)
> var fragment = document.createDocumentFragment();
> [apply some operations to element here]
> [append to DOM here]
> 
> The difference is that a document fragment disappears when you add it to
> the DOM.
> 
> I think that both scenarios have almost the same performance. (based on
> results from http://jsperf.com/createelement-vs-createdocumentfragment/4
> and _I know_ that jsperf may not be a confident source of benchmarks).

It should be obvious that creating an object, assuming that is possible, is 
always less efficient than not creating an object, and that a method call is 
always less efficient than no method call.  Figuring out the rest is left as 
an exercise to the student.
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Page 3 of 3 — ← Prev page 1 2 [3]

Back to top | Article view | comp.lang.javascript

csiph-web