trying to set row color

[jodleren]

Hi all

I want the user to be able to click on a row, and it should turn red

My code;

function toggle_row(x)
{
alert(x); // test
document.getElementById(x).style.bgcolor="red";
alert(x); // test
}

and the table:

qq=0
do while not rsJob.eof
%><tr id="tooling_<%=qq%>" onclick="toggle_row('tooling_<%=qq%>');">
<td><%=rsJob.fields(0).value%></td>

This does not work... any ideas why?

WBR
Sonnich
[29 mins left....]

 

[Martin Honnen]

document.getElementById(x).style.bgcolor="red";

This does not work... any ideas why?

The CSS property is named background-color and that is mapped to the
Javascript property named backgroundColor. So replace bgcolor with
backgroundColor in that line.

 

[jodleren]

The CSS property is named background-color and that is mapped to the
Javascript property named backgroundColor. So replace bgcolor with
backgroundColor in that line.

That did not work. I need to have it in CSS, then it works

But also fixing my problem in CSS was a good thing

then this:

function toggle_row(x)
{
if(document.getElementById(x).className=="redrow")
document.getElementById(x).className=""
else
document.getElementById(x).className="redrow";
}

WBR
Sonnich

 

[Evertjan.]

jodleren wrote on 20 okt 2009 in comp.lang.javascript:

That did not work. I need to have it in CSS, then it works

But also fixing my problem in CSS was a good thing

then this:

function toggle_row(x)
{
if(document.getElementById(x).className=="redrow")
document.getElementById(x).className=""
else
document.getElementById(x).className="redrow";
}

You would want to colour the td backgrounds,
as tr has no background:

<style type='text/css'>
tr.redrow td {background.color:red;}
tr.yellowrow td {background.color:yellow;}
</style>

 

[Osmo Saarikumpu]

Evertjan. kirjoitti:

You would want to colour the td backgrounds,
as tr has no background:

I don't see what you mean by tr having no background? Surely the
background color applies to tr?

<style type='text/css'>
tr.redrow td {background.color:red;}
dc {background.color:yellow;}
</style>

Seems superfluous to me. For example:

<style type='text/css'>
..redrow {background-color:red;}
..yellowrow {background-color:yellow;}
</style>

would suffice for tr elements of those classes. And the same via JavaScript?

 

[Thomas 'PointedEars' Lahn]

Evertjan. kirjoitti:

I don't see what you mean by tr having no background? Surely the
background color applies to tr?

TR/tr elements not supporting background-color is a known IE/MSHTML bug.
As a result, you need this (and for TH/th elements, too):

There is a `dc' element? What is this, EML (Electric Markup Language)? ;-)


PointedEars

 

[Evertjan.]

Thomas 'PointedEars' Lahn wrote on 21 okt 2009 in comp.lang.javascript:

TR/tr elements not supporting background-color is a known IE/MSHTML bug.
As a result, you need this (and for TH/th elements, too):

It is not a bug, because TR is not supposed to display anything else than
other elements, cells.

You could say it would be extremely useful to give TR a background, that
could be inherited by TD, but that does not make the absense a bug.

A backgound colour for a row could also be useful.

 

[JR]

Thomas 'PointedEars' Lahn wrote on 21 okt 2009 in comp.lang.javascript:



It is not a bug, because TR is not supposed to display anything else than
other elements, cells.

You could say it would be extremely useful to give TR a background, that
could be inherited by TD, but that does not make the absense a bug.

A backgound colour for a row could also be useful.

I use the following code line that works nicely in IE 7/8, Opera,
Safari and FF3:
row.style.backgroundColor = "#f0f0f0";

Cheers,
JR

 

[SAM]

Le 10/22/09 9:35 PM, JR a écrit :
I don't know if TDs/THs inherit the background of the TR,
but giving a background to a TR colorizes the cells (IE6 at least).
Some more background effects can be applied too (IE7 at least) only
using css.

I use the following code line that works nicely in IE 7/8, Opera,
Safari and FF3:
row.style.backgroundColor = "#f0f0f0";

and then the JS :

row.style.backgroundColor = row.style.backgroundColor=="#f0f0f0"?
'#0f0f0f' : '#f0f0f0';

will not work

prefer always to use classes (className)

 

[JR]

Le 10/22/09 9:35 PM, JR a écrit :


I don't know if TDs/THs inherit the background of the TR,
but giving a background to a TR colorizes the cells (IE6 at least).
Some more background effects can be applied too (IE7 at least) only
using css.


and then the JS :

row.style.backgroundColor = row.style.backgroundColor=="#f0f0f0"?
        '#0f0f0f' : '#f0f0f0';

will not work

prefer always to use classes (className)

Hi SAM,
Actually I utilise a script to alternate the colours of the table's
rows, which a call "zebra effect":

// other code lines define tbody, row, fZebra and some other
variables.

for (var i = 0, tbr = tbody.rows, len = tbr.length; i < len; i++) {
row = tbr;
row.style.backgroundColor = (fZebra ? "#f0f0f0" : "#ffffff");
fZebra = !fZebra;
}

There's an example using this technique at:
http://www.jrfaq.com.br/sortable.htm

Cheers,
JR

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote on 21 okt 2009 in comp.lang.javascript:

It is not a bug, because TR is not supposed to display anything else than
other elements, cells.

Non sequitur.

,-<http://www.w3.org/TR/CSS2/colors.html#propdef-background-color>
|
| Value: <color> | transparent | inherit
| Initial: transparent
| Applies to: all elements
^^^^^^^^^^^^
| Inherited: no
| Percentages: N/A
| Media: visual
| Computed value: as specified


PointedEars

 

[SAM]

Le 10/23/09 2:14 AM, JR a écrit :

Hi SAM,

Hi Junior,

Actually I utilise a script to alternate the colours of the table's
rows, which a call "zebra effect":

// other code lines define tbody, row, fZebra and some other
variables.

I see in the html code :
<tr style="background-color: rgb(240, 240, 240);">
so, or it is a jock of my Firefox, or really you do not use colors
defined such as #xxxxxx

for (var i = 0, tbr = tbody.rows, len = tbr.length; i < len; i++) {
row = tbr;
row.style.backgroundColor = (fZebra ? "#f0f0f0" : "#ffffff");
fZebra = !fZebra;
}

You need no variable to alternate colors in successive rows

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].style.background = n%2==0? "#f0f0f0" : "#ffffff";

There's an example using this technique at:

but you do not change any of background then
(it is after having set the colors that you'll get problems to know
which color was affected to the element, some browsers stock colors in
hexa, some others in rgb. It's why working with classes is better)

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].className = n%2==0? "silver" : "";

More : className can be an help for rollover effects :
..sortable tbody tr:hover { background: #ffc }
..sortable tr.silver { background: #f0f0f0 }
..sortable tr.silver:hover { background: #ff0 }

 

[Osmo Saarikumpu]

Thomas 'PointedEars' Lahn kirjoitti:

TR/tr elements not supporting background-color is a known IE/MSHTML bug.

I suspected something like that. I hear it's fixed in IE8, but I won't
be able to confirm that in the near future.

There is a `dc' element? What is this, EML (Electric Markup Language)? ;-)

Oops. That's my <Dizis Crap> element from OML (as in Osmo) testing
environment, left there by some idiot with access to my keyboard

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn kirjoitti:

Oops. That's my <Dizis Crap> element from OML (as in Osmo) testing
environment, left there by some idiot with access to my keyboard

YMMD.


Regards,

PointedEars

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn kirjoitti:

I suspected something like that. I hear it's fixed in IE8, but I won't
be able to confirm that in the near future.

Apparently I have confused it with the `border' property.


PointedEars

 

[JR]

I see in the html code :
<tr style="background-color: rgb(240, 240, 240);">
so, or it is a jock of my Firefox, or really you do not use colors
defined such as #xxxxxx

Definitely it's a Firebug 'thing' because source code in FF3 reveals
<tr style="background-color:#f0f0f0;">
or

for (var i = 0, tbr = tbody.rows, len = tbr.length; i < len; i++) {
row = tbr;
row.style.backgroundColor = (fZebra ? "#f0f0f0" : "#ffffff");
fZebra = !fZebra;
}

You need no variable to alternate colors in successive rows

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].style.background = n%2==0? "#f0f0f0" : "#ffffff";

Oh boy! Thanks for that hint.

but you do not change any of background then
(it is after having set the colors that you'll get problems to know
which color was affected to the element, [...]

Every row's background is changed via javascript (loop). I managed to
store some properties in jrSortTables.tableProp for speeding up
execution in IE7. Therefore, I don't have "problems to know which
color was affected".

[...] some browsers stock colors in
hexa, some others in rgb. It's why working with classes is better)

Sorry, but I don't see any problem in here, using either rgb or hexa.
Moreover, I didn't think of changing classes because the Javascript
code would be used in different sites; in other words, I didn't want
to depend on external CSS files. That's why I chose the
row.style.backgroundColor approach.

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].className = n%2==0? "silver" : "";

Well, it's a clever way to do it. Thanks again.

More : className can be an help for rollover effects :
.sortable tbody tr:hover { background: #ffc }
.sortable tr.silver { background: #f0f0f0 }
.sortable tr.silver:hover { background: #ff0 }

Allright, allright! Using classes is okay, but there's no reduction in
js code - eventually we'll need to use a while-loop the same way.

Cheers,
JR

 

[Thomas 'PointedEars' Lahn]

Definitely it's a Firebug 'thing' because source code in FF3 reveals
<tr style="background-color:#f0f0f0;">
or
<tr style="background-color:white;">

It is a Gecko DOM "thing"; values that do not correspond with specified
color names are retrieved in CSS's rgb(...) format.

tr.style.backgroundColor = "#f0f0f0";

/* rgb(240, 240, 240) */
tr.style.backgroundColor

for (var i = 0, tbr = tbody.rows, len = tbr.length; i < len; i++) {
row = tbr;
row.style.backgroundColor = (fZebra ? "#f0f0f0" : "#ffffff");
fZebra = !fZebra;
}

You need no variable to alternate colors in successive rows

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].style.background = n%2==0? "#f0f0f0" : "#ffffff";

Oh boy! Thanks for that hint.

You might want to use `backgroundColor' instead, as `background' resets the
other background detail properties to the default, unless specified in a
global stylesheet.

Easier to maintain and more flexible is to set the `class' attribute using
the `className' property to trigger CSS classes named e.g. `odd' and `even':

#mytable tbody tr.odd {
background-color: #fff;
}

#mytable tbody tr.even {
/* color value is not Web-safe, should not be used */
background-color: #f0f0f0;
}

(See <http://PointedEars.de/es-matrix/#features> for a working example.)

You can also use CSS3, and do not need any scripting for this:

#mytable tbody tr:nth-child(odd) {
background-color: #fff;
}

#mytable tbody tr:nth-child(even) {
/* color value is not Web-safe, should not be used */
background-color: #f0f0f0;
}

(whereas `mytable' is the ID of the `table' element.) Then probably
comparing the computed style against the target color of the element
`onload' the `body' element can avoid the loop where this feature of
CSS3 Selectors (WD) is already supported. (I am experimenting with
it locally.)

More : className can be an help for rollover effects :
.sortable tbody tr:hover { background: #ffc }
.sortable tr.silver { background: #f0f0f0 }
.sortable tr.silver:hover { background: #ff0 }

Allright, allright! Using classes is okay, but there's no reduction in
js code [...]

Yes, there is.


PointedEars

 

[Dr J R Stockton]

In comp.lang.javascript message <f286c506-8355-405b-92c8-95d7c2ba9142@r3
1g2000vbi.googlegroups.com>, Thu, 22 Oct 2009 17:14:10, JR <groups_jr-
(e-mail address removed)> posted:

for (var i = 0, tbr = tbody.rows, len = tbr.length; i < len; i++) {
row = tbr;
row.style.backgroundColor = (fZebra ? "#f0f0f0" : "#ffffff");
fZebra = !fZebra;
}

row.style.backgroundColor = (fZebra^=1) ? "#f0f0f0" : "#ffffff" }

 

[SAM]

Le 10/24/09 12:38 PM, Thomas 'PointedEars' Lahn a écrit :

It is a Gecko DOM "thing"; values that do not correspond with specified
color names are retrieved in CSS's rgb(...) format.

tr.style.backgroundColor = "#f0f0f0";

/* rgb(240, 240, 240) */
tr.style.backgroundColor

so you're right to say using style colors can cause problems ?
(at least with some browser(s))

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].style.background = n%2==0? "#f0f0f0" : "#ffffff";

Oh boy! Thanks for that hint.

You might want to use `backgroundColor' instead,

No that would have broken the line (more than 70 characters) ;-)

 

[JR]

Le 10/23/09 2:14 AM, JR a écrit :

Hi SAM,

Hi Junior,

Actually I utilise a script to alternate the colours of the table's
rows, which a call "zebra effect":

// other code lines define tbody, row, fZebra and some other
variables.

I see in the html code :
       <tr style="background-color: rgb(240, 240, 240);">
so, or it is a jock of my Firefox, or really you do not use colors
defined such as #xxxxxx

for (var i = 0, tbr = tbody.rows, len = tbr.length; i < len; i++){
  row = tbr;
  row.style.backgroundColor = (fZebra ? "#f0f0f0" : "#ffffff");
  fZebra = !fZebra;
}

You need no variable to alternate colors in successive rows

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].style.background = n%2==0? "#f0f0f0" : "#ffffff";

There's an example using this technique at:

but you do not change any of background then
(it is after having set the colors that you'll get problems to know
which color was affected to the element, some browsers stock colors in
hexa, some others in rgb. It's why working with classes is better)

var tbr = tbody.rows, n = tbr.length;
while(n--) tbr[n].className = n%2==0? "silver" : "";

More : className can be an help for rollover effects :
.sortable tbody tr:hover { background: #ffc }
.sortable tr.silver { background: #f0f0f0 }
.sortable tr.silver:hover { background: #ff0 }

http://www.jrfaq.com.br/sortable.htm

Hi Stéphane,
I've just watched a video about Javascript optimization in which
Nicholas C. Zakas, from Google Inc, recommended changing className
instead of style property:

It reduces the number of DOM reflows in a loop (if I understood it
correctly).

I'd like to thank you and tell you that I put your advices into
practice:
http://www.jrfaq.com.br/sortable.htm

Cheers,
João Rodrigues (JR)