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

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

apply classes to table rows after table is rendered, how

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

Contents

  apply classes to table rows after table is rendered, how Mike S <mscir@yahoo.com> - 2016-01-01 18:44 -0800
    Re: apply classes to table rows after table is rendered, how Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2016-01-02 11:21 -0200
      Re: apply classes to table rows after table is rendered, how Mike S <mscir@yahoo.com> - 2016-01-02 18:30 -0800
    Re: apply classes to table rows after table is rendered, how Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-01-02 22:19 +0100
    Re: apply classes to table rows after table is rendered, how Mike S <mscir@yahoo.com> - 2016-01-02 18:29 -0800
    Re: apply classes to table rows after table is rendered, how Aleksandro <aleksandro@gmx.com> - 2016-01-04 13:31 -0300
    Re: apply classes to table rows after table is rendered, how Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-01-04 17:39 +0100

#29099 — apply classes to table rows after table is rendered, how

I generate a table (using PHP) that has alternating white/off-white row 
background colors for readability. I was asked to make the table 
sortable, so of the background colors no longer alternate when the table 
is sorted on various column data. What do I have to read to learn how to 
apply alternating row background colors to a table that is already 
rendered? Any suggested reading would be appreciated.

[toc] | [next] | [standalone]

#29104

On 01/02/2016 12:44 AM, Mike S wrote:
> I generate a table (using PHP) that has alternating white/off-white row
> background colors for readability. I was asked to make the table
> sortable, so of the background colors no longer alternate when the table
> is sorted on various column data. What do I have to read to learn how to
> apply alternating row background colors to a table that is already
> rendered? Any suggested reading would be appreciated.

If you want to sort a table on the client-side, you may use the code 
that I wrote in 2009:
<http://www.jrfaq.com.br/sortable.htm>

-- 
Joao Rodrigues

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

#29111

On 1/2/2016 5:21 AM, Joao Rodrigues wrote:
> On 01/02/2016 12:44 AM, Mike S wrote:
>> I generate a table (using PHP) that has alternating white/off-white row
>> background colors for readability. I was asked to make the table
>> sortable, so of the background colors no longer alternate when the table
>> is sorted on various column data. What do I have to read to learn how to
>> apply alternating row background colors to a table that is already
>> rendered? Any suggested reading would be appreciated.
>
> If you want to sort a table on the client-side, you may use the code
> that I wrote in 2009:
> <http://www.jrfaq.com.br/sortable.htm>

I have sorting code, thanks, your code is quite nice!

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

#29109

Mike S wrote:

> I generate a table (using PHP) that has alternating white/off-white row
> background colors for readability. I was asked to make the table
> sortable, so of the background colors no longer alternate when the table
> is sorted on various column data. What do I have to read to learn how to
> apply alternating row background colors to a table that is already
> rendered?

Use CSS *selectors*: The :nth-child pseudo-class, and add or remove an 
“odd”/“even” class name from the “tr” element in question when you sort the 
table as a fallback.  Then know that this has already been written and 
published several times; Google is your friend.  See the ECMAScript Support 
Matrix (sig) for an example of using both :nth-child() and classes for 
alternating rows.

The “From” header field of your posting is lacking your last name, Mike S 
#74656.

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

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

#29110

On 1/1/2016 7:31 PM, Stefan Ram wrote:
> ram@zedat.fu-berlin.de (Stefan Ram) writes:
>> Mike S <mscir@yahoo.com> writes:
>>> What do I have to read to learn how to apply alternating row
>>> background colors to a table that is already rendered?
>> When you use CSS
>> tr:nth-child(even) {background: #E88}
>> tr:nth-child(odd) {background: #88E}
>> does this already have the desired effect?
>
>    Here is a quick go at doing it with JavaScript:
>
>    (Sorry, my current XHTML5 template has long lines with
>    more than 72 characters in them.)
>
> <!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
> <head><meta charset="UTF-8" /><title>Hallo</title><style type="text/css">
>
>        .red {background: #E88}
>        .green {background: #8E8}
>
> </style></head><body>
>
>      <table id="table" summary="example table summary" width="100%">
>        <colgroup>
>          <col width="50%">
>          <col width="50%">
>          </colgroup>
>        <caption>example table caption</caption>
>        <tr valign="bottom">
>          <th align="left"><strong>left</strong></th>
>          <th align="left"><strong>right</strong></th></tr>
>        <tr valign="top"><td>left</td><td>right</td></tr>
>        <tr valign="top"><td>left</td><td>right</td></tr>
>        <tr valign="top"><td>left</td><td>right</td></tr>
>        <tr valign="top"><td>left</td><td>right</td></tr>
>        <tr valign="top"><td>left</td><td>right</td></tr>
>        <tr valign="top"><td>left</td><td>right</td></tr>
>        </table>
>
> <pre><code><script type="application/javascript;version=1.8">/*<![CDATA[*/
>
>            var j = 0;
>
>            function animate()
>            { let rows = document.getElementById( "table" ).
>              getElementsByTagName( "tr" );
>              for( let i = 0; i < rows.length; ++i )
>              { rows[ i ].classList.remove( 'red'   );
>                rows[ i ].classList.remove( 'green' );
>                rows[ i ].classList.add(( i + j )% 2 ? 'red' : 'green' ); }
>              ++j; setTimeout( animate, 1000 ); }
>
>            setTimeout( animate, 1000 );
>
> /*]]>*/</script></code></pre></body></html>
>
>    I think there should be a special element type name for this
>    effect. I will suggest it to the W3C under the name »BLINK«.
>    This is semantically more meaningful than several lines of
>    cryptic JavaScript!

Thanks, I'll take a close look into this when work slows down in 2 days. 
i appreciate the time you took to write this up.
Best Regards,
Mike

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

#29138

On 04/01/16 13:08, Stefan Ram wrote:
> ram@zedat.fu-berlin.de (Stefan Ram) writes:
>> It possibly would be even better to define
>> »animate« to be a closure around »j«. Then
>> »j« would be totally private to »animate«.
>> (I don't know whether this will also make
>> accesses to »j« faster.)
> 
>   In the meantime, by pure coincidence, I read in a book that
>   today property accesses usually are faster than accesses to
>   enclosed variables. The same author also wrote that names of
>   »private« properties sometimes begin with an underscore.
> 

Not totally related but I wanted to mention...

I think that if the interpreter can predict what property will be
accessed permanently, so that the enclosed symbol's value will remain
unchanged for example, these accesses will be as fast.

For example:

	var name   = "length"
	var length = someArray[name]

if the interpreter predicts that name will never change in the runtime,
the following access will be as fast as simply saying someArray.length.

If between the brackets there is an expression thing can be different
though but I bet some interpreters can optimize even that.

Why I mention this: because I think that interpreters can optimize other
things the same way.

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

#29139

Stefan Ram wrote:

> ram@zedat.fu-berlin.de (Stefan Ram) writes:
>>It possibly would be even better to define
>>»animate« to be a closure around »j«. Then
>>»j« would be totally private to »animate«.
>>(I don't know whether this will also make
>>accesses to »j« faster.)
> 
>   In the meantime, by pure coincidence, I read in a book that
>   today property accesses usually are faster than accesses to
>   enclosed variables. The same author also wrote that names of
>   »private« properties sometimes begin with an underscore.

You have been told this before: You need to *cite* your references, and to 
*quote* the substantiating statements.  So, which book, by whom, what do 
“usually” and “enclosed variable” mean, which ECMAScript implementation(s) 
is/are being referred to, and what reason is being given?  Without that, the 
information you give above is worthless.  Put rather explicitly:

  “Opinions are like assholes, everybody’s got one.”
    – Larry Flynt (in: “The People vs. Larry Flynt”, Sony Pictures, 1996)

Since this field is ripe with people overconfident in their technical 
understanding due to early success (JavaScript intentionally looks simple), 
there are more bad books than good books on the topic, which is why the FAQs 
so far contain no explicit recommendations by the regulars of this 
newsgroup.

| > If you get a bunch of authors […] that state the same "best practices"
| > in any programming language, then you can bet who is wrong or right...
| Not with javascript. Nonsense propagates like wildfire in this field.
|   -- Richard Cornford, comp.lang.javascript, 2011-11-14

As a result, relying on books, in particular relying on only one book or 
only one author on the topic, is a recipe for disaster.

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

[toc] | [prev] | [standalone]

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

csiph-web