2009
09.09

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]HBFOTPCNTCQYDBG LTI FRP BNK PTP SER KVN HGN BGK SKG PGL
HBF 357911131517202325272931
OTP3 135791114171922242628
CNT51 1367912151720222426
CQY731 246810131618202225
DBG 9532 1358111316182022
LTI 117641 13691114161820
FRP 1397631 247912141618
BNK 151198532 25710121416
PTP 171412108642 25791113
SER 20171513119752 247911
KVN 2319171613119752 2468
HGN 2522201816141210742 246
BGK 27242220181614129742 24
SKG 2926242220181614119642 2
PGL 312826252220181613118642 

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

var sdvtableName = "sdvNELDemoTable";
function Select(row, col, clear)
{            
	var myTable = document.getElementById(sdvtableName);
	var i = 0;
	var j = 0;
	
	if (clear)
	{
		for (i=1; i< myTable.rows.length; i++)
		{
			for (j=1; j<myTable.rows[i].cells.length; j++)
			{        
				var csName = myTable.rows[i].cells[j].getAttribute("class");
				if (csName != "tableHead") {
					myTable.rows[i].cells[j].setAttribute("class", "tableBody");
				}
			}
		}
	}	

	if (row == 0)
	{           
		//hightlight column only    
		for (i=1; i<myTable.rows.length;i++)
		{
			//get style
			var csName = myTable.rows[i].cells[col].getAttribute("class");
			if (csName != "tableHead") {
				if (csName == "highlighted")
					myTable.rows[i].cells[col].setAttribute("class", "tableBody");
				else
					myTable.rows[i].cells[col].setAttribute("class", "highlighted");
			}
		}
	}
	else if (col == 0)
	{           
		//highlight row only
		for (i=1; i<myTable.rows[row].cells.length;i++)
		{
			//get style
			var csName = myTable.rows[row].cells[i].getAttribute("class");
			if (csName != "tableHead") {
				if (csName == "highlighted")
					myTable.rows[row].cells[i].setAttribute("class", "tableBody");
				else 
					myTable.rows[row].cells[i].setAttribute("class", "highlighted");                
			}
		}
	}
	else
	{
		//highlight both based on row and column
		Select(row, 0, false);
		Select(0, col, false)
		var csName = table.rows[row].cells[col].getAttribute("class");
		if (csName != "tableHead") {
			table.rows[row].cells[col].setAttribute("class", "highlighted-twice");	
		}
	}
}

function initTable()
{
	var myTable = document.getElementById(sdvtableName);
	var i = 0;
	var j = 0;
	for (i=0; i< myTable.rows.length; i++)
	{
		for (j=0; j<myTable.rows[i].cells.length; j++)
		{            
			var c = j.toString();
			var r = i.toString();
			if (i==0 &amp;&amp; j == 0 )
				myTable.rows[i].cells[j].setAttribute("onclick", "Select(" + r + ", " + c +", true)");
			else 
				myTable.rows[i].cells[j].setAttribute("onclick", "Select(" + r + ", " + c +", true)");
		}
	}
}

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;
}
GD Star Rating
loading...
A (slightly better) North-East-Line (NEL) Travel Time Table, 5.0 out of 5 based on 1 rating

Incoming Search Term

Advertise Here

1 Trackback

 

No Comment

Add Your Comment