Asp Forum - apply classes to table rows after table is rendered, how

Mike Scirocco

1/2/2016 2:44:00 AM

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.

11 Answers

ram

1/2/2016 3:06:00 AM

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?

ram

1/2/2016 3:31:00 AM

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/x... 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!

JR

1/2/2016 1:22:00 PM

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/sortab...

--
Joao Rodrigues

ram

1/2/2016 5:09:00 PM

ram@zedat.fu-berlin.de (Stefan Ram) writes:
>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 );

New version:

( function()
{ "use strict";
const animate = function animate()
{ "use strict";
const rows = document.getElementById( "table" ).
getElementsByTagName( "tr" );
const l = rows.length;
for( let i = 0; i < l; ++i )
{ const list = rows[ i ].classList;
list.remove( 'red', 'green' );
list.add(( i + animate.j )% 2 ? 'red' : 'green' ); }
++animate.j; setTimeout( animate, 1000 ); }
animate.j = 0;
setTimeout( animate, 1000 ); } )();

- less namespace pollution
- more strict mode
- more »const«
- »j« is now more local to »animation«
- took »rows.length« out of for loop
- no more duplication of »rows[ i ].classlist«
- used multi-args »remove«

ram

1/2/2016 6:03:00 PM

ram@zedat.fu-berlin.de (Stefan Ram) writes:
>>function animate()
>- »j« is now more local to »animation«

... to »animate«.

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

Thomas 'PointedEars' Lahn

1/2/2016 9:19:00 PM

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Mike Scirocco

1/3/2016 2:29:00 AM

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/x... 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

Mike Scirocco

1/3/2016 2:31:00 AM

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/sortab...

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

ram

1/4/2016 4:09:00 PM

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.

Aleksandro

1/4/2016 4:32:00 PM

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.

comp.lang.javascript

apply classes to table rows after table is rendered, how

Mike Scirocco

ram

ram

JR

ram

ram

Thomas 'PointedEars' Lahn

Mike Scirocco

Mike Scirocco

ram

Aleksandro

x Login to ForumsZone