style based on tag content

[jpolaski]

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
<td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

Thanks in advance,

Jeff P.

[Ken Loomis]

On 27 Apr 2006 11:17:13 -0700, jp******@rgs.uci.edu wrote:

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
<td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

As you process the data to put it in the table, check to see what it
is and then give the <td> the appropriate class.

For example in php:

$myClass="";
if ($row->status == "pos")
$myClass="pos";
if ($row->status == "pending")
$myClass="pending";

$myData .= "<td class=\"$myClass\">$row->status</td>";

Ken

[jpolaski]

The data isn't in a database for this one... This data get changed
rarely, so it isn't really worth the extra complexity of stuffing
everyting in a db.

Also, it just seems like there should be a simple way to do it with
style sheets. But it looks like you can do styles with *tags*, but not
*content*. Which is a bummer.

For example, it would be nice to italicize "et. al." or "in vivo"
across a site without having to add <i>, or div or span tags?

Don't you think there should be something like:

td:content "pos" {
color: red;
}

or
content "in vivo" {
font: italic;
}

~Jeff P.

[Ken Loomis]

On 27 Apr 2006 12:20:03 -0700, jp******@rgs.uci.edu wrote:

Don't you think there should be something like:

td:content "pos" {
color: red;
}

or
content "in vivo" {
font: italic;
}

It's called XML.

Ken

[Ken Loomis]

On Thu, 27 Apr 2006 15:35:51 -0400, Ken Loomis
<no**************@address.com> wrote:

td:content "pos" {
color: red;
}

or
content "in vivo" {
font: italic;
}
It's called XML.

Actually, come to think of it, even XML can't do that.

It has to be done programatically, AFAIK.
Ken

[Martin Eyles]

The closest I can think of is attribute selectors.

http://www.w3.org/TR/CSS21/selector....bute-selectors

[att=val]
Match when the element's "att" attribute value is exactly "val".

However I don't think you can have content as the att. Also, this selector
is NOT cross browser friendly, as although my favourite browser (Firefox)
supports it, 90% of the world's browsers (Internet Explorer) do not.

Martin
<jp******@rgs.uci.edu> wrote in message
news:11*********************@i40g2000cwc.googlegro ups.com...

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
<td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

Thanks in advance,

Jeff P.

[dingbat]

Ken Loomis wrote:

It's called XML.
Actually, come to think of it, even XML can't do that.

Try XSLT
It has to be done programatically, AFAIK.

Yes, but that doesn't have to mean a procedural program language.
XSLT's declarative style makes it very easy.

It's pretty much trivial to take an XHTML document, then transform it
with XSLT to add suitable classes and style the results with CSS. The
transformed document can be practically identical to the original, just
with added classes.

Although you don't need to use XHTML to do this, it's notably easy to
do it with XSLT and a slightly modified XSLT identity transform.

[VK]

jp******@rgs.uci.edu wrote:

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
<td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

Thanks in advance,
Use behaviors
IE 5.5 or higher
Firefox 1.0 or higher
Camino 1.0 or higher
any other modern Gecko based browser
Netscape 8.0 or higher

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Table 1</title>
<style type="text/css">
table {
border: medium groove;
-moz-binding: url(zebra.xml#default);
behavior: url(bycontent.htc);
}
td {
margin: 0px 0px;
border: 1px solid black;
padding: 5px 5px;
}
</style>
</head
<body <table
<caption>Content based styling</caption
<thead
<tr
<th>Header 1</th
<th>Header 2</th
<th>Header 3</th
</tr
</thead
<tfoot
<tr
<td>Footnote 1</td
<td>Footnote 2</td
<td>Footnote 3</td
</tr
</tfoot
<tbody
<tr
<td>pos</td
<td>Content 1-2</td
<td>Content 1-3</td
</tr
<tr
<td>Content 2-1</td
<td>pos</td
<td>Content 2-3</td
</tr
<tr
<td>Content 3-1</td
<td>Content 3-2</td
<td>at. al.</td
</tr
</tbody
</table </body
</html>

// bycontent.xml

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="default">
<implementation>

<constructor><![CDATA[
var rL = this.rows.length;
for (var i=0; i<rL; i++) {
this.rows[i].style.backgroundColor = (i%2)? '#DDDDDD' : '#FFFFFF';
}
]]></constructor>
<destructor><![CDATA[
// your code here
]]></destructor>

</implementation>
</binding>
</bindings>
// bycontent.htc
<?xml version="1.0"?>
<public>
<component>
<attach event="oncontentready" onevent="constructor()" />
<attach event="ondetach" onevent="destructor()" />
</component>
<script type="text/Jscript"><!--

function constructor() {
var rL = element.tBodies[0].rows.length;
var cL = 0;
var cR = null;
for (var i=0; i<rL; i++) {
cL = element.tBodies[0].rows[i].cells.length;
for (var j=0; j<cL; j++) {
cR = element.tBodies[0].rows[i].cells[j];
switch (cR.innerText) {
case 'pos' :
cR.style.color = '#FF0000';
break;
case 'at. al.' :
cR.style.fontStyle = 'italic';
break;
default: /*NOP*/
}
}
}
}
function destructor() {
// your code goes here
}

//--></script>

</public>
P.S. The weird pretty-print in HTML is not some requirement for
behaviors. I just programmed my editor in this way to fix the phantom
nodes bug in Firefox. You are free to use the conventional pretty-print.

[VK]

VK wrote:

Use behaviors
IE 5.5 or higher
Firefox 1.0 or higher
Camino 1.0 or higher
any other modern Gecko based browser
Netscape 8.0 or higher
Here btw another popular demand: style differently odd and even table
rows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Table 1</title>
<style type="text/css">
table {
border: medium groove;
-moz-binding: url(zebra.xml#default);
behavior: url(zebra.htc);
}
td {
margin: 0px 0px;
border: 1px solid black;
padding: 5px 5px;
}
</style>
</head
<body <table
<caption>&quot;Zebra&quot; row style</caption
<thead
<tr
<th>Header 1</th
<th>Header 2</th
<th>Header 3</th
</tr
</thead
<tfoot
<tr
<td>Footnote 1</td
<td>Footnote 2</td
<td>Footnote 3</td
</tr
</tfoot
<tbody
<tr
<td>Content 1-1</td
<td>Content 1-2</td
<td>Content 1-3</td
</tr
<tr
<td>Content 2-1</td
<td>Content 2-2</td
<td>Content 2-3</td
</tr
<tr
<td>Content 3-1</td
<td>Content 3-2</td
<td>Content 3-3</td
</tr
</tbody
</table </body
</html>

// zebra.xml

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="default">
<implementation>

<constructor><![CDATA[
var rL = this.rows.length;
for (var i=0; i<rL; i++) {
this.rows[i].style.backgroundColor = (i%2)? '#DDDDDD' : '#FFFFFF';
}
]]></constructor>
<destructor><![CDATA[
// your code here
]]></destructor>

</implementation>
</binding>
</bindings>
// zebra.htc

<?xml version="1.0"?>
<public>
<component>
<attach event="oncontentready" onevent="constructor()" />
<attach event="ondetach" onevent="destructor()" />
</component>
<script type="text/Jscript"><!--

function constructor() {
var rL = element.rows.length;
for (var i=0; i<rL; i++) {
element.rows[i].style.backgroundColor = (i%2)? '#DDDDDD' : '#FFFFFF';
}
}
function destructor() {
// your code goes here
}

//--></script>

</public>

[VK]

VK wrote:

Use behaviors
Damn... Copying - Pasting code is a real challenge for weak minds like
mine... :-)
-moz-binding: url(zebra.xml#default);
behavior: url(bycontent.htc);

of course:
-moz-binding: url(bycontent.xml#default);
behavior: url(bycontent.htc);

and respectively bycontent.xml is:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="default">
<implementation>

<constructor><![CDATA[
var rL = this.rows.length;
var cL = 0;
var cR = null;
for (var i=0; i<rL; i++) {
cL = this.rows[i].cells.length;
for (var j=0; j<cL; j++) {
cR = this.rows[i].cells[j];
switch (cR.innerHTML) {
case 'pos' :
cR.style.color = '#FF0000';
break;
case 'at. al.' :
cR.style.fontStyle = 'italic';
break;
default: /*NOP*/
}
}
}
]]></constructor>
<destructor><![CDATA[
// your code here
]]></destructor>

</implementation>
</binding>
</bindings>
In my code I actually add innerText virtual property to the behavior
(binding) for more uniform looking and reliable code. If you don't use
HTML tags in your table cells like <span>pos</span> then the above is
good enough.

[jpolaski]

Well, yes it will work, but it's a lot of overhead. In this case I'd
rather just add a class to the columns I want made red, though.

I think it's better to keep things simple. If I went for your solution
(which *will* work) I'd have to convert all the HTML documents I have
into XHTML, and then set up XSLT to do what I want. Doesn't that seem a
bit much?

I'm changing the subject slightly, but doesn't it seem like one should
be able to use a simple CSS technique (like 'td:content "pos"' or
'content "in vivo"' from an earlier post)?

Don't get me wrong, I'm not expecting anyone here to add this feature
to CSS. I'm simply pointing out that, now that I think about it, it
looks like a shortcoming of CSS... CSS is ultimatly about styling
content, isn't it?

I think there should be a way to directly style *content*, not just
*tags*.

[jpolaski]

Thank you, that's what I was thinking of...

[jpolaski]

That's the best solution so far. I'll have to come up with a set of
behaviors for our site.

Thank you!

[Harlan Messinger]

Martin Eyles wrote:

The closest I can think of is attribute selectors.

http://www.w3.org/TR/CSS21/selector....bute-selectors

[att=val]
Match when the element's "att" attribute value is exactly "val".

However I don't think you can have content as the att.

Just to confirm: you can't. An element's content isn't an attribute.

[VK]

jp******@rgs.uci.edu wrote:

That's the best solution so far. I'll have to come up with a set of
behaviors for our site.

Thank you!

You are welcome. I have some set of copyright free twinpairs (XBL/HTC)
for some most common task. Ask if you need.

[Harlan Messinger]

VK wrote:

jp******@rgs.uci.edu wrote:

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
<td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

Thanks in advance,

Use behaviors
IE 5.5 or higher
Firefox 1.0 or higher
Camino 1.0 or higher
any other modern Gecko based browser
Netscape 8.0 or higher

[demo snipped]

Seems like an awful lot of work to use a behavior for this. Wouldn't it
be easier to take the working part of it and stick it in a script?

function adjustTable(table)
{
var tds = table.getElementsByTagName("td");
var iTD;
for (iTD = 0; iTD < tds.length; iTD++)
{
switch ...

}
}

[in onload handler]
adjustTable(document.getElementById("myTable"));

If the scope should be restricted to particular columns, then you
approach of going methodically through the TBODY and then TRs makes sense.

[VK]

Harlan Messinger wrote:

Use behaviors
IE 5.5 or higher
Firefox 1.0 or higher
Camino 1.0 or higher
any other modern Gecko based browser
Netscape 8.0 or higher
[demo snipped]

Seems like an awful lot of work to use a behavior for this. Wouldn't it
be easier to take the working part of it and stick it in a script?

function adjustTable(table)
{
var tds = table.getElementsByTagName("td");
var iTD;
for (iTD = 0; iTD < tds.length; iTD++)
{
switch ...

}
}

In this particular case it is replaceable by <script>, because we do
not have to augment elements by new properties/methods, do not insert
anonymous content, do not require refactored events for bounds elements
etc.

In the "Sticky Notes" sample
<http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference#Example_-_Sticky_Notes>

we have a HTML 4.01 Strict valid document with notes decorated with SVG
(Gecko) / VML (IE) graphics being part of the document tree (and more).

Also "a lot of work" for who? ;-) Any solution requires some initial
work, sometimes a lot of work - all eventually expressed in one line
<script src="myscript.js"></script>.
The question is how easy is to raise the solution over and over again
without adjusting it for new context every time. In this aspect to have
everything in one .css sheet with two lines added:
table {
....
-moz-binding: url(zebra.xml#default);
behavior: url(zebra.htc);
}
doesn't need a lot of work.

If the scope should be restricted to particular columns, then you
approach of going methodically through the TBODY and then TRs makes sense.

Well... Only to you alone: a dark secret of XBL :-) In the current
Gecko implementation in tables one can attach bindings only to the
table element itself, not to tr or td (bug 83830). IE behavior doesn't
have this limitation. Without this bug I would attach bindings right to
rows which has much more sense - and would let me stay out of any
coding at all.

[jpolaski]

No, it doesn't work. Yes, that's what I was originally thinking of.

As things stand now, there is no easy solution.

[Tony]

>> Running Apple programs on a PC doesn't work, even if you were

thinkig of using an emulator

jp******@rgs.uci.edu wrote:
No, it doesn't work. Yes, that's what I was originally thinking of.

As things stand now, there is no easy solution.

Is your car running? Or maybe you could take public transportation?
Otherwise, how are you going to get to work?

jp******@rgs.uci.edu wrote:
No, it doesn't work. Yes, that's what I was originally thinking of.

As things stand now, there is no easy solution.

Such a radical change is likely to cause problems. Maybe we should
consider a more measured approach.

jp******@rgs.uci.edu wrote:
No, it doesn't work. Yes, that's what I was originally thinking of.

As things stand now, there is no easy solution.

Sorry - I'm trying...