问题描述
首先让我说我对javascript知之甚少。
我需要做的是写一个javascript功能,它会改变
的背景颜色表格行基于表格中的主题。
查看脚本将在此处使用的网页示例:
现在,在顶部将有3个按钮,它们将调用javascript
函数,这些函数将在表2到N上运行。单击第1个
将按照总计突出显示表的行时钟周期,其中
是表格第1列的条目,第2个按钮将根据第2列的值突出显示
,第3个按钮突出显示基于值
第3列的
。突出显示将以这样的方式完成:在控制单元格中具有最大编号的第一,第二或
第3的EACH表中的行
将以红色阴影显示,那就是color =#FF0000并且控制单元格中带有
最小数字的行将是阴影白色,#FFFFFF。
问题是,怎么做我这样做了吗?
如果你给我看一个说第二栏的例子,我可以推断为第一和第三栏我需要做什么
。
我们还希望java脚本具有最小的大小,因为我必须将它编码成我在C中编写的解析器,输出
a C代码,然后写入HTML文件。
我不在这里发布任何代码,但不是因为我懒得写
我自己,我根本不知道从哪里开始。
谢谢你。
我真的不知道以下内容是否足够,但是
绝对可以让你开始使用你的项目。只需在打开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。
" you ??
[请总是在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.
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.
"you" ??
[please always quote on usenet]
--
Evertjan.
The Netherlands.
(Please change the x''es to dots in my emailaddress)
这篇关于根据内容更改表格背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!