Jesus... la idea es esta, pero hay unos problemas de recursividad con la funcion que colorea, echale una miradita haber que te parece
Código HTML:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
ai=2000
af=2002
bi=2002
bf=2010
ci=2010
cf=2012
fecha=year(now)
ad=(af-ai)
bd=(bf-bi)
cd=(cf-ci)
if fecha>=ai and fecha<af then
a="ok"
elseif fecha>=bi and fecha<bf then
b="ok"
elseif fecha>=ci and fecha<cf then
c="ok"
end if
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
input{
border:#CCCCCC 1px thin;
width:35px;}
</style>
<script>
function calcular(par){
//definicion de variables
var a, b, c, d, fecha, fyear, letra;
//asignacion de valores
a=document.getElementById(par + "i"); // fecha inicio
b=document.getElementById(par + "f"); // fecha fin
c=document.getElementById(par + "d"); // diferencia
d=document.getElementById(par); // espacio ROJO
//evaluaciones
c.value=(parseInt(b.value) - parseInt(a.value));
colorear(par);
}
function colorear(par1){
var e, f, ua, ub,uc;
var fecha=new Date();
var fyear=fecha.getFullYear();
e=document.getElementById(par1 + "f");
f=document.getElementById(par1);
g=document.getElementById('a');
h=document.getElementById('b');
i=document.getElementById('c');
switch(par1)
{
case "a": if((fyear<e.value)||(fyear==e.value))
{f.style.backgroundColor="#FF0000";
h.style.backgroundColor="";
i.style.backgroundColor="";}
else{colorear('b');}break;
case "b": if((fyear<e.value)||(fyear==e.value))
{f.style.backgroundColor="#FF0000";
g.style.backgroundColor="";
i.style.backgroundColor="";}
else{colorear('c');}break;
case "c": if((fyear<e.value)||(fyear==e.value))
{f.style.backgroundColor="#FF0000";
h.style.backgroundColor="";
g.style.backgroundColor="";}
else{colorear('a');}break;
default:alert('ninguna fecha');break;
}
} </script>
</head>
<body>
<table>
<tr><td> </td><th>A</th><th>B</th><th>C</th></tr>
<tr>
<th>
<div id="info">
<ul>Inicio</ul>
<ul>Fin</ul>
<ul>duracion</ul></div></th>
<td><div id="a" <%if a="ok" then response.Write "style='background-color:#FF0000'"%>>
<ul><input type="text" value="<%=ai%>" id="ai" onchange="calcular('a')" /></ul>
<ul><input type="text" value="<%=af%>" id="af" onchange="calcular('a')" /></ul>
<ul><input type="text" value="<%=ad%>" id="ad" readonly="readonly" /></ul></div></td>
<td><div id="b" <%if b="ok" then response.Write "style='background-color:#FF0000'"%>>
<ul><input type="text" value="<%=bi%>" id="bi" onchange="calcular('b')" /></ul>
<ul><input type="text" value="<%=bf%>" id="bf" onchange="calcular('b')" /></ul>
<ul><input type="text" value="<%=bd%>" id="bd" readonly="readonly" /></ul></div></td>
<td><div id="c" <%if c="ok" then response.Write "style='background-color:#FF0000'"%>>
<ul><input type="text" value="<%=ci%>" id="ci" onchange="calcular('c')" /></ul>
<ul><input type="text" value="<%=cf%>" id="cf" onchange="calcular('c')" /></ul>
<ul><input type="text" value="<%=cd%>" id="cd" readonly="readonly" /></ul></div></td>
</tr>
</table>
<script>calcular('a');</script>
</body>
</html>