2009
09.09

A (slightly better) North-East-Line (NEL) Travel Time Table

Posted by / Category: Programming / Tag: ,  / 1 comment / 26 views

The original Travel Time table is located here. Originally it is just a static table, two static tables to be exact.

I decided to make it a little more ‘fun’ to use. Click anywhere inside the table to view the action.

[CLEAR] HBF OTP CNT CQY DBG LTI FRP BNK PTP SER KVN HGN BGK SKG PGL
HBF   3 5 7 9 11 13 15 17 20 23 25 27 29 31
OTP 3   1 3 5 7 9 11 14 17 19 22 24 26 28
CNT 5 1   1 3 6 7 9 12 15 17 20 22 24 26
CQY 7 3 1   2 4 6 8 10 13 16 18 20 22 25
DBG 9 5 3 2   1 3 5 8 11 13 16 18 20 22
LTI 11 7 6 4 1   1 3 6 9 11 14 16 18 20
FRP 13 9 7 6 3 1   2 4 7 9 12 14 16 18
BNK 15 11 9 8 5 3 2   2 5 7 10 12 14 16
PTP 17 14 12 10 8 6 4 2   2 5 7 9 11 13
SER 20 17 15 13 11 9 7 5 2   2 4 7 9 11
KVN 23 19 17 16 13 11 9 7 5 2   2 4 6 8
HGN 25 22 20 18 16 14 12 10 7 4 2   2 4 6
BGK 27 24 22 20 18 16 14 12 9 7 4 2   2 4
SKG 29 26 24 22 20 18 16 14 11 9 6 4 2   2
PGL 31 28 26 25 22 20 18 16 13 11 8 6 4 2  

No fancy tricks used here. Just the basic DOM Table traversal and DOM attribute get/set.

And the CSS used

.tableBody
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	text-align:center;
	color: #FFF;
	background-color: #000;
	cursor:pointer;
}
.tableHead
{
	font-weight: bold;
	color: #FFF;
	background-color: #665A4A;
}
.highlighted
{
	color: #000;
	background-color: #AAA;
}
.highlighted-twice
{
	color: #FFF;
	background-color: #666;
}