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.

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;
}

Incoming Search

javascript, singapore