Re: apply classes to table rows after table is rendered, how

From	Mike S <mscir@yahoo.com>
Newsgroups	comp.lang.javascript
Subject	Re: apply classes to table rows after table is rendered, how
Date	2016-01-02 18:29 -0800
Organization	A noiseless patient Spider
Message-ID	<n6a0t8$tne$1@dont-email.me> (permalink)
References	<n67ddd$k5k$1@dont-email.me> <CSS-20160102040520@ram.dialup.fu-berlin.de> <color-table-20160102042948@ram.dialup.fu-berlin.de>

Show all headers | View raw

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

Thread

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

csiph-web