HTML Table Row Highlight

Javascript:

var TableRow = {

    selected:-1,

    hoverColor:'#CCCCCC',

    defaultColor:'#EEEEFF',

    onmouseover : function(trow,id)

    {

        if (TableRow.selected!= id)

            trow.bgColor=TableRow.hoverColor;

    },

    onmouseout : function(trow,id)

    {

        if (TableRow.selected!= id)

            trow.bgColor=TableRow.defaultColor;

    },

    onclick : function(trow,id)

    {

        if (TableRow.selected == id)

        {

            TableRow.selected = -1;

            trow.bgColor=TableRow.hoverColor;

        }

        else

        {

            var r = document.getElementById('id_tablerow_'+TableRow.selected);

            if (TableRow.selected !=-1 && r)

               r.bgColor=TableRow.defaultColor;

            TableRow.selected = id;

            trow.bgColor=TableRow.hoverColor;

        }

    }

}

CSS:

table.selectable-table td {  font-size:10pt; font-family: Arial;   }

table.selectable-table td {  cursor:pointer;  margin:0px; border:0px; padding:2px 5px 2px 5px;   }

table.selectable-table  {  border-spacing:0px;  background:#eef;}

PHP Which generates HTML

$data = array();

$data[] = array(1 ,'Toronto '       ,'Ontario'         ,'5,113,149');

$data[] = array(2 ,'Montreal'       ,'Quebec'          ,'3,635,571');

$data[] = array(3 ,'Vancouver'      ,'British Columbia','2,116,581');

$data[] = array(4 ,'Ottawa-Gatineau','Ontario/Quebec'  ,'1,130,761');

$data[] = array(5 ,'Calgary'        ,'Alberta'         ,'1,079,310');

$data[] = array(6 ,'Edmonton'       ,'Alberta'         ,'1,034,945');

$data[] = array(7 ,'Quebec City'    ,'Quebec'          ,'715,515');

$data[] = array(8 ,'Winnipeg'       ,'Manitoba'        ,'694,668');

$data[] = array(9 ,'Hamilton'       ,'Ontario'         ,'692,911');

$data[] = array(10,'London'         ,'Ontario'         ,'457,720');

echo "<table cellpadding=0 cellspacing=0 class=selectable-table>";

foreach($data as $j=>$row)

{

    echo "<tr id='id_tablerow_$j' onmouseover=\"TableRow.onmouseover(this,$j);\" onmouseout=\"TableRow.onmouseout(this,$j);\" onclick=\"TableRow.onclick(this,$j);\">";

    foreach($row as $d)

        echo "<td>$d</td>";

    echo "</tr>";

}

echo "</table>";

DEMO:

1	Toronto	Ontario	5,113,149
2	Montreal	Quebec	3,635,571
3	Vancouver	British Columbia	2,116,581
4	Ottawa-Gatineau	Ontario/Quebec	1,130,761
5	Calgary	Alberta	1,079,310
6	Edmonton	Alberta	1,034,945
7	Quebec City	Quebec	715,515
8	Winnipeg	Manitoba	694,668
9	Hamilton	Ontario	692,911
10	London	Ontario	457,720