Change table background based on content

[free4trample]

First of all let me say that I know very little about javascript.
what i need to do is to write a javascript functin which will change
the background color of the table rows based on entrees in the table.
See an example of the webpage that the script will work with here:
http://igorpetrusky.awardspace.com/RunStats.html

now, at the top there will be 3 buttons, which will call javascript
functions that will operate on tables 2 through N. Clicking the 1st
one will highlight rows of the table based on total clock cycles, which
is the entry of the 1st column of the table, 2nd button will highlight
based on values of 2nd column and 3rd button highlight based on values
of 3rd column. The highlighting will be done in such a way that the row
in EACH table with largest number in the controlling cell, 1st, 2nd or
3rd, will be shaded red, that is color =#FF0000 and the row with the
least number in the controlling cell will be shaded white, #FFFFFF.

question is, how do i do this?

If you show me an example for say a 2nd column, i can extrapolate to
what i need to do for 1rst and 3rd.

It is also desirable that the java script will have the smallest size,
because i have to encode it into a parser written by me in C, to output
a C code, which will then write the HTML file.

I am not posting any code here, but not because I am too lazy to write
it myself, I simply have no idea where to even start.

Thanks ahead.

 

[Elegie]

(e-mail address removed) wrote:

Hi,

First of all let me say that I know very little about javascript.
what i need to do is to write a javascript functin which will change
the background color of the table rows based on entrees in the table.
See an example of the webpage that the script will work with here:
http://igorpetrusky.awardspace.com/RunStats.html

now, at the top there will be 3 buttons, which will call javascript
functions that will operate on tables 2 through N. Clicking the 1st
one will highlight rows of the table based on total clock cycles, which
is the entry of the 1st column of the table, 2nd button will highlight
based on values of 2nd column and 3rd button highlight based on values
of 3rd column. The highlighting will be done in such a way that the row
in EACH table with largest number in the controlling cell, 1st, 2nd or
3rd, will be shaded red, that is color =#FF0000 and the row with the
least number in the controlling cell will be shaded white, #FFFFFF.

I don't really know whether the following will suffice, however it
should definitely get you started with your project. Simply copy paste
after the opening of the BODY tag, before your tables.

---
<form action="" onsubmit="return false">
<input type="button" value="Clock Cycles" onclick="highlight(0)">
<input type="button" value="Times Exec." onclick="highlight(1)">
<input type="button" value="Cycles per Exec." onclick="highlight(2)">
</form>

<script type="text/javascript">
with({
COLOR_MAX_VALUE:"#f00",
COLOR_MIN_VALUE:"#fff",
COLOR_NRM_VALUE:""
}){

var highlight=function(N){
var tables, ii, j, k, rows, v, mx, mn;

// For each table, except the first one
tables=document.getElementsByTagName("table");
for(ii=1;ii<tables.length;ii++) {
rows=tables[ii].rows;
v=[];

// store values in 'v'
for(j=1/*skip headers*/; j<rows.length; j++) {
v.push({
value:Number(getInnerText(rows[j].cells[N]))||0,
cells:rows[j].cells
});
highlightCells(rows[j].cells, COLOR_NRM_VALUE);
}

// sort
v.sort( function(a, b) { return (a.value<b.value) ? -1:1; } );
mn=v[0];
mx=v[v.length-1];

// highlight min
for(j=0; j<v.length; j++) {
if(v[j].value==mn.value) {
highlightCells(v[j].cells, COLOR_MIN_VALUE);
} else { break; }
}

// highlight max
for(j=v.length-1; j>=0; j--) {
if(v[j].value==mx.value) {
highlightCells(v[j].cells, COLOR_MAX_VALUE);
} else { break; }
}
}

function highlightCells(cells, color) {
for(var ii=0; ii<cells.length; ii++)
cells[ii].style.backgroundColor=color;
}

function getInnerText(el){
if(typeof el.innerText!="undefined") {
return (getInnerText=function(el){
return el.innerText;
})(el);
} else if(typeof el.textContent!="undefined") {
return (getInnerText=function(el){
return el.textContent;
})(el);
} else {
return (getInnerText=function(el){
var v="";
switch (el.nodeType) {
case 3:
v=el.nodeValue;
break;
case 1:
for(var ii=0; ii<el.childNodes.length; ii++)
v+=getInnerText(el.childNodes[ii]);
break;
}
return v;
})(el);
}
}

}
}
</script>

 

[free4trample]

Thank you ver much for you help, your scripts works wery well.
I was able to implement it with no problem. I will now try to extend it
to highlight the code with values less then max value but greater than
min value with a gradient of red to white. Ill post my progress as i
go.

Thanks again, very helpfull.

 

[Evertjan.]

wrote on 28 Sep 2006 in comp.lang.javascript:

Thank you ver much for you help, your scripts works wery well.

"you" ??

I was able to implement it with no problem. I will now try to extend it
to highlight the code with values less then max value but greater than
min value with a gradient of red to white. Ill post my progress as i
go.

[please always quote on usenet]

 

[free4trample]

I have 2 more questions:

1. When i look at the HTML code created by FrontPage, it uses 6 symbols
for RGB color coding, for example white is FFFFFF, you use 3 symbols
FFF, does HTML interpreter automatically determine the colordepth,
based on the number of symbols used in RGB color code?

2. Lets say I have a color which in 256 color depth would be described
by a function 255^3+S1^2+S1, that is 255 red S1 Green and S1 Blue, S1 a
number between 0 and 255.

My question is, knowing S1, how could i assign the color to the cell
background?

Lets say I define a variable color as follows:

var color=255^3+S1^2+S1,

how would i assign that color to the cell? is the following a legal
call?

cells[ii].style.backgroundColor=color;

or do i need to somehow convert it to hex string?

Thanks ahead.

 

[free4trample]

Google groups hates me, I tried to post a reply to your post earlier,
but its still did not gow through.

Anyways, here I go again

Thank you very much for the code you posted, it works very well. I
adjusted it a little bit, to allow gradient highlighting of all rows,
but it seems there is something wrong with my Color Map. I planned the
code to use RGB colormap, so then the rows with least value would be
shaded FFFFFF and with largest value shaded FF0000 here is the code i
changed in your function:

for(j=0; j<v.length; j++) {
var score=1-v[j].value/mx.value;
var color1=255*255*255+score*255*255+score*255;
highlightCells(v[j].cells, color1);
}


my next question is, how do i reset the color map to RGB? and also how
do I set its ColorDepth?

thanks ahead.

 

[Elegie]

(e-mail address removed) wrote:

Hi,

Thank you very much for the code you posted, it works very well. I
adjusted it a little bit, to allow gradient highlighting of all rows,
but it seems there is something wrong with my Color Map.

First, you might want to get familiar with how colors are defined in
CSS, i.e. which values are authorized for the backgroundColor property:

I planned the
code to use RGB colormap, so then the rows with least value would be
shaded FFFFFF and with largest value shaded FF0000 here is the code i
changed in your function:

for(j=0; j<v.length; j++) {
var score=1-v[j].value/mx.value;
var color1=255*255*255+score*255*255+score*255;
highlightCells(v[j].cells, color1);
}

Would the following help?

---
//define variable "score" with other variables, at the top
//replace the min/max "for" loops by the following
for(j=0; j<v.length; j++) {
var score=Math.floor(
(1-(v[j].value-mn.value)/(mx.value-mn.value))*10
)/10;
highlightCells(
v[j].cells,
rgb2htmlColor(255, 255*score, 255*score)
);
}
---

.... with rgb2htmlColor defined as :

---
/* Source :
<URL:http://groups.google.fr/group/comp.lang.javascript/msg/8897dfcb5ff78736>
*/
function rgb2htmlColor(r,g,b){
var colorVal = (r << 16 | g << 8 | b).toString(16);
return "#"+("000000").substring(0,6-colorVal.length)+colorVal;
}

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Thu, 28
Sep 2006 10:58:30 remote, seen in Elegie

v.sort( function(a, b) { return (a.value<b.value) ? -1:1; } );

The comparison function of a .sort() is required to return 0 if the
elements are equal. If it does not do so, and elements are equal,
behaviour is undefined. It'll probably work in most systems, but not
necessarily in all.


The comparison function of a .sort() is required to return a Number, to
be negative, zero, or positive. There is no need to give a specific
value. If a.value and b.value are Numbers, the comparison can return
their difference. It'll work even if the difference is bigger than the
largest finite Number.

It's a good idea to read the newsgroup and its FAQ. See below.

 

[Elegie]

The comparison function of a .sort() is required to return 0 if the
elements are equal. If it does not do so, and elements are equal,
behaviour is undefined. It'll probably work in most systems, but not
necessarily in all.

Quite true, and actually the proposed implementation breaks the
transitivity rule; I do not think either (given my limited knowledge of
sort algorithms) that this should be a problem, however there is
certainly more in that code than a simply inaccurate formulation.

The comparison function of a .sort() is required to return a Number, to
be negative, zero, or positive. There is no need to give a specific
value. If a.value and b.value are Numbers, the comparison can return
their difference. It'll work even if the difference is bigger than the
largest finite Number.

Indeed; so in the end something like the following should be appropriate.

 

[free4trample]

Thank you all for all your help with JavaScript.

I have updated my C profiler, which generates webpage to display
profile results and uses javascript on that page.

you can see the final result here:

http://igorpetrusky.awardspace.com/advanced_c_profiler.htm

scroll to the bottom of the page and click on "Output HTML file" link
to see the sample HTML file generated by my C profiler, that uses
JavaSrcipt you helped me with.

Best regards

 

[free4trample]

yeah, but now the output looks way cool. Plus I have development
priorities to fixing the minor bugs, for example redoing the Code
string allocation by placing string constants in header of the file,
which should significantly improove execution time of profining app.

 

[free4trample]

oops the last post was suppose to be for C/C++ board. sorry about that.