根据内容更改表格背景 [英] Change table background based on content
问题描述
首先让我说我对javascript知之甚少。
我需要做的是写一个javascript功能，它会改变
的背景颜色表格行基于表格中的主题。
查看脚本将在此处使用的网页示例：
http://igorpetrusky.awardspace.com/RunStats.html
现在，在顶部将有3个按钮，它们将调用javascript
函数，这些函数将在表2到N上运行。单击第1个
将按照总计突出显示表的行时钟周期，其中
是表格第1列的条目，第2个按钮将根据第2列的值突出显示
，第3个按钮突出显示基于值
第3列的
。突出显示将以这样的方式完成：在控制单元格中具有最大编号的第一，第二或
第3的EACH表中的行
将以红色阴影显示，那就是color =＃FF0000并且控制单元格中带有
最小数字的行将是阴影白色，＃FFFFFF。
问题是，怎么做我这样做了吗？
如果你给我看一个说第二栏的例子，我可以推断为第一和第三栏我需要做什么
。
我们还希望java脚本具有最小的大小，因为我必须将它编码成我在C中编写的解析器，输出
a C代码，然后写入HTML文件。
我不在这里发布任何代码，但不是因为我懒得写
我自己，我根本不知道从哪里开始。
谢谢你。
fr ********** @ yahoo.com 写道：
首先让我说我对javascript知之甚少。
我需要做的是写一个javascript功能，它会改变
背景颜色基于表中主菜的表行。
请参阅脚本将在此处使用的网页示例：
http://igorpetrusky.awardspace.com/RunStats.html
现在，在顶部将有3个按钮，它们将调用javascript
函数，这些函数将在表2到N上运行。单击第1个
将基于总时钟突出显示表的行循环，其中
是表格第1列的条目，第2个按钮将突出显示
基于第2列的值和第3个按钮突出显示基于值
第3栏
。突出显示将以这样的方式完成：在控制单元格中具有最大编号的第一，第二或
第3的EACH表中的行
将以红色阴影显示，即color =＃FF0000，控制单元格中带有
最小数字的行将以阴影为白色，＃FFFFFFF。
我真的不知道以下内容是否足够，但是
绝对可以让你开始使用你的项目。只需在打开BODY标签后，在桌面前复制粘贴
。
---
<表格动作= QUOT;" 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 ="每个Exec的周期。 onclick =" highlight（2）">
< / form>
with（{
COLOR_MAX_VALUE："＃f00"，
COLOR_MIN_VALUE：" #ffff"，
COLOR_NRM_VALUE：""
}）{
var highlight = function（N）{
var tables，ii ，j，k，rows，v，mx，mn;
//对于每个表，除了第一个表
tables = document.getElementsByTagName（" ; table"）;
for（ii = 1; ii< tables.length; ii ++）{
rows = tables [ii] .rows;
v = [];
//将值存储在''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（函数（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; }
}
//突出显示最大值
（j = v.length-1; j> = 0; j - ）{
if（v [j] .value == mx.value）{
highlightCells（v [j] .cells，COLOR_MAX_VALUE）;
} else {break; }
}
}
函数highlightCells（单元格，颜色）{
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）{
返回el.innerText;
}）（el）;
}否则if（typeof el.textContent！=" undefined"）{
return（getInnerText = function（el）{
return el.textContent;
}）（el）;
} else {
return（getInnerText = function（el）{
var v ="" ;;
switch（el.nodeType） {
案例3：
v = el.nodeValue;
休息;
案例1：
for（var ii = 0; ii< el.childNodes.length; ii ++）
v + = getInnerText（el.childNodes [ii]）;
break ;
}
返回v;
}）（el）;
}
}
}
}
< / script>
---
HTH。
非常感谢你的帮助，你的脚本很好用。
我能够毫无问题地实现它。我现在尝试将它扩展为
以突出显示代码，其值小于最大值但大于
最小值，红色到白色渐变。生病了我的进展，因为我好了。
go。
再次感谢，非常有帮助。
于2006年9月28日在comp.lang.javascript中写道 ：
非常感谢你的帮助，你的脚本很有效好。
" you ??
我能够毫无问题地实现它。我现在尝试将它扩展为
以突出显示代码，其值小于最大值但大于
最小值，红色到白色渐变。生病了我的进展，因为我好了。
go。
[请总是在usenet上报价]
-
Evertjan。
荷兰。
（请在我的电子邮件地址中将x'变为点数）
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.
fr**********@yahoo.com 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>
---
HTH.
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.
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]
--
Evertjan.
The Netherlands.
(Please change the x''es to dots in my emailaddress)
这篇关于根据内容更改表格背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
