How can i display the dates that i have in my table in a different color if they were less than today's date?


:confused: ..

Recommended Answers

All 8 Replies

Since this is a JavaScript question, I assume you want this done completely client-side? We'll be happy to help, but first a couple of observations:

1) This might be easier server-side. How are you generating your pages?

2) The approach will depend on your page structure and doctype. Can you give us a skeleton sample of your HTML?

Member Avatar for iamthwee

Perhaps this

The Date Object would indeed come into play, but the bigger question is how he'll access the "dates" that are in his table. There needs to be a corresponding Date Object for those, or a method to access those via the DOM and move them into a Date Object, before any comparsion could be done.

That's why I pointed toward the server-side solution. My guess is that this is a dynamic, program-generated page, and as such, rather than load the page with JavaScript Date Objects to do client-side, after-the-fact date recognition, he should simply do it server-side while building the page.

omg O_o hard Qs ..

How am i generating the data? ..

Its all dummy data that i typed directly in the table .. but later on IT ppl will load data to it i dont know how .. :o

and I am working on my own machine no client no server no nothing ..

ahh ..

but anyway can you give me the server side one? I think they want that one ..

and yea you asked for the html skeleton ..

here you go .. this needs to be changed its not the final thing ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Flight Information System</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style type="text/css">
<!--
body {
	background-color: #F2F7FF;
}
body,td,th {
	font-family: Verdana;
	font-size: 9px;
}
-->
</style></head>

<body>
<table width="491" border="0" align="center">
  <tr>
    <td><img src="bright_banner.jpg" width="725" height="85"/></td>
  </tr>
</table>
<table width="728" border="0" align="center">
  <tr class="titles">
  <td width="191" height="30"><table width="191" border="0">
          <tr>
            <td width="185"><div align="left"><span class="titles"><strong>Exp. Period</strong>: 25.04.00 - 25.04.08</span></div></td>
          </tr>
    </table></td>
    <td><div align="center" class="style7"></div>
    <table width="502" border="0" align="center">
        <tr>
          <td width="496"><div align="center"><strong>Flight Information System / </strong><strong>Record of Airline Aircraft Report</strong></div>            </td>
        </tr>
    </table>    </td>
  </tr>
</table>
<table width="723" border="0" align="center" cellspacing="1">
<thead>
<tr class="head1">

<th colspan="4">Airline - Aircraft</th>
<th colspan="3">Certificate Validity</th>
<th colspan="4">Insurance Validity</th>
<th colspan="4">Add Title</th>
</tr>

<tr class="header">
    <td width="26">Code</td>
    <td width="114">Name</th>
    <td width="28">Air</td>
    <td width="34">Reg. No</td>
    <td width="48">A.O.C</td>
    <td width="48">C.O.F.R</td>
    <td width="48">C.O.F.A</td>
    <td width="48">HULL</td>
    <td width="48">Third Party</td>
    <td width="48">PAX</td>
    <td width="48">CGO</td>
    <td width="31">LOAD</td>
    <td width="31">ACAS</td>
    <td width="33">TCAS (V7)</td>
    <td width="44">Total Aircrafts</td>
  </tr>
  </thead>
  
  <tbody>
  <tr>
    <td>00</td>
    <td>TAV Aviation Joint Stock</td>
    <td>HS125</td>
    <td>TCTAV</td>
    <td>&nbsp;</td>
    <td>05/01/2007</td>
    <td>&nbsp;</td>
    <td>31/10/2006</td>
    <td>31/10/2006</td>
    <td>31/10/2006</td>
    <td>31/10/2006</td>
    <td>PAX</td>
    <td>YES</td>
    <td>NO</td>
    <td>1</td>
  </tr>
  <tr>
    <td>000</td>
    <td>Salem Aviation Jeddah</td>
    <td>AN12</td>
    <td>11036</td>
    <td>01/06/2006</td>
    <td>01/07/2006</td>
    <td>01/08/2006</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>PAX</td>
    <td>NO</td>
    <td>YES</td>
    <td>1</td>
  </tr>
  <tr>
    <td>AAP</td>
    <td>Aerovista Airlines</td>
    <td>AN24</td>
    <td>EX004</td>
    <td>15/08/2006</td>
    <td>18/12/2006</td>
    <td>&nbsp;</td>
    <td>30/04/2006</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>PAX</td>
    <td>YES</td>
    <td>NO</td>
    <td>1</td>
  </tr>
    <tr>
    <td>AIN</td>
    <td>African International Airways</td>
    <td>DC8</td>
    <td>ZSOSI</td>
    <td>20/12/2006</td>
    <td>10/04/2007</td>
    <td>&nbsp;</td>
    <td>01/04/2007</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>CGO</td>
    <td>YES</td>
    <td>NO</td>
    <td>1</td>
  </tr>
  <tr>
    <td>ATG</td>
    <td>Aerotrans Airlines</td>
    <td>T154</td>
    <td>85569</td>
    <td>20/11/2007</td>
    <td>10/04/2006</td>
    <td>&nbsp;</td>
    <td>21/06/2006</td>
    <td>21/06/2006</td>
    <td>21/06/2006</td>
    <td>21/06/2006</td>
    <td>PAX</td>
    <td>YES</td>
    <td>NO</td>
    <td>1</td>
  </tr>
  <tr>
    <td>AZQ</td>
    <td>Silk Way Airlines</td>
    <td>IL76</td>
    <td>4KAZ41</td>
    <td>08/03/2007</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>CGO</td>
    <td>YES</td>
    <td>NO</td>
    <td>1</td>
  </tr>
  <tr>
    <td>AZV</td>
    <td>ASOV - AVIA, Air Company</td>
    <td>IL76</td>
    <td>URZVC</td>
    <td>16/02/2008</td>
    <td>16/02/2008</td>
    <td>&nbsp;</td>
    <td>17/06/2006</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>CGO</td>
    <td>YES</td>
    <td>NO</td>
    <td>1</td>
  </tr>
  <tr>
    <td>BDS</td>
    <td>South Asia Airlines Limited</td>
    <td>B707</td>
    <td>S2ADU</td>
    <td>15/02/2006</td>
    <td>&nbsp;</td>
    <td>15/07/2006</td>
    <td>01/09/2006</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>CGO</td>
    <td>YES</td>
    <td>NO</td>
    <td>1</td>
  </tr>
  
  </tbody>
</table>
<p>&nbsp;</p>
<table width="435" border="0" align="left">
  <tr>
    <td width="44" class="titles">Date:</td>
    <td width="381">&nbsp;</td>
  </tr>
  <tr>
    <td class="titles">Time:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="titles">Page:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><div align="right"><A HREF="javascript:window.print()" class="titles">Print Page</A></div></td>
  </tr>
</table>
<p align="left">&nbsp;</p>

</body>
</html>

:!:

Perhaps this

you know, i thought that your signature was your reply to my Q .. i was like COMPLETY LOST :confused: .. haha ..

Thanks for the link .. Will try to understand it .. You know I know nothing about Javascript ..

Is that code fine? I mean the doctype and all that :o

Looks good. You can validate it against w3c.org's validators, to be sure.

Ok, the short answer is that you use CSS to style HTML elements. You could create two CSS classes, one for normal color, and one for "old" dates.

<style type="text/css">
.normal
{
  color: black;
}

.old
{
  color: red;
}
</style>

Something like that, to use a simple example. This goes in your HEAD portion of your document.

Then, to apply the style, add the "class" attribute to your tags:

<td class="normal>normal</td>
<td class="old">old</td>

The trick is, how to do that programmatically? Again, I suggest server-side. There is no one solution, first you have to decide what language you're going to use, and learn the basics of that language.

I suggest PHP. Daniweb has a great PHP forum.

The basic idea is that you create CSS and HTML to control how the page looks, and then you write a PHP program to output the CSS & HTML. At the time the PHP program runs (which is as soon as a user browses to the page), it can enter the dates into the table, check the dates, and add the correct "class" to the table elements.

Daniweb in fact is a big PHP program.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.